canvas mdn_MDN文档 canvas教程笔记

MDN Canvas教程

API Canvas​Rendering​Context2D即canvas.getContext('2d')返回的对象类型，几乎所有作图操作基于这个“上下文对象”而非canvas dom，下文以context2D作简称

只有矩形、文本、图片是可直接绘制显示的

fillRect(x, y, width, height)

绘制一个填充的矩形

strokeRect(x, y, width, height)

绘制一个矩形的边框

clearRect(x, y, width, height)

清除指定矩形区域，让清除部分完全透明。

fillText(text, x, y [, maxWidth])

在(x,y)位置绘制(填充)文本。

strokeText(text, x, y [, maxWidth])

在(x,y)位置绘制(描边)文本。

drawImage(image, dx, dy [, dWidth, dHeight])

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

在(x,y)位置绘制图像。

其他均需要路径

beginPath()

新建一条路径

closePath()

闭合路径(即路径没有闭合时，从当前点生成一条直线路径连到起始点，使其闭合)

stroke()

绘制路径(即描边)

fill()

(根据设置)填充路径内部

路径

context2D路径方法(省略参数)：

moveTo()

将一个新的子