Canvascheatsheet

JS
复制代码
var canvas = document.getElementById("c");
var c = canvas.getContext("2d");

JS
复制代码
// x = 10, y = 20, width = 200, height = 100
c.fillStyle = "#ff0000";
c.strokeStyle = "#ff00ff";

JS
复制代码
c.lineWidth = 5;
c.lineCap = "round";

JS
复制代码
c.fillRect(10, 20, 200, 100);

JS
复制代码
c.stroke();
c.fill();

JS
复制代码
c.save();

JS
复制代码
c.restore();

JS
复制代码
onframe: function() {
  c.clearRect(0, 0, w, h)
}

JS
复制代码
c.translate(0, 0);
c.rotate((Math.PI * 2) / 5);
c.scale(1.0, 1.0);

JS
复制代码
c.translate(ox, oy);
c.rotate(theta);
c.translate(-ox, -oy);

JS
复制代码
c.translate(-ox * x, -oy * y);
c.scale(x, y);
c.translate(ox / x, oy / y);

JS
复制代码
c.drawImage(image, dx, dy, [dw, dh]);
/* `image` can be HTML Image/Canvas/Video */

JS
复制代码
c.strokeStyle = "#ff00ff";
c.fillStyle = "#ff00ff";

JS
复制代码
c.shadowOffsetX = 0;
c.shadowOffsetY = 0;
c.shadowOffsetBlur = 3.0;
c.shadowColor = "rgba(0,0,0,0.2)";

JS
复制代码
gr = c.createLinearGradient(x0, y0, x1, y1);
gr = c.createRadialGradient(x0, y0, r0, x1, y1, r1);
pat = c.createPattern(image, "repeat-x");

JS
复制代码
c.fillStyle = gr;

JS
复制代码
c.beginPath()
c.moveTo(x,y)
c.lineTo(x,y)
c.quadraticCurveTo(cpx,cpy,x,y)
c.bezierCurveTo(cp1x,cp1y,cp2x,cp2y)
c.arcTo(...)
c.arc(...)
c.closePath()