Canvas 速查表

本文根据 Devhints / Canvas 翻译。代码示例及版本范围沿用原文。

获取上下文

var canvas = document.getElementById('c')
var c = canvas.getContext('2d')

基础绘图

// x = 10, y = 20, width = 200, height = 100
c.fillStyle = '#ff0000'
c.strokeStyle = '#ff00ff'

c.lineWidth = 5
c.lineCap = 'round'

c.fillRect(10, 20, 200, 100)

c.stroke()
c.fill()

保存与恢复

c.save()

c.restore()

保存内容： strokeStyle fillStyle globalAlpha lineWidth lineCap lineJoin miterLimit shadowOffsetX shadowOffsetY shadowBlur shadowColor globalCompositeOperation、变换（translate rotate scale transform setTransform）、裁剪路径

动画

onframe: function() {
  c.clearRect(0, 0, w, h)
}

变换

c.translate(0, 0)
c.rotate(Math.PI*2/5)
c.scale(1.0, 1.0)

绕原点旋转：

c.translate(ox, oy)
c.rotate(theta)
c.translate(-ox, -oy)

绕原点缩放：

c.translate(-ox*x, -oy*y)
c.scale(x, y)
c.translate(ox/x, oy/y)

参见 MDN：变换.

绘制图像

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

参见 MDN：图像.

颜色、样式与阴影

c.strokeStyle = '#ff00ff';
c.fillStyle = '#ff00ff';

c.shadowOffsetX = 0;
c.shadowOffsetY = 0;
c.shadowOffsetBlur = 3.0;
c.shadowColor = 'rgba(0,0,0,0.2)';

参见 MDN：样式

渐变

gr = c.createLinearGradient(x0,y0,x1,y1)
gr = c.createRadialGradient(x0,y0,r0,x1,y1,r1)
pat = c.createPattern(image, 'repeat-x')

c.fillStyle = gr

绘图

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()

更多资源

• Canvas 速查表 PDF