一、渲染上下文

var canvas = document.getElementById('tutorial');

//获得 2d 上下文对象

var ctx = canvas.getContext('2d');

二、绘制形状

绘制矩形

fillRect(x, y, width, height)：绘制一个填充的矩形。

strokeRect(x, y, width, height)：绘制一个矩形的边框。

clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。

绘制路径

beginPath()新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径

moveTo(x, y)把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。

closePath()：闭合路径之后，图形绘制命令又重新指向到上下文中

stroke()：通过线条来绘制图形轮廓（描边）

fill()：通过填充路径的内容区域生成实心的图形

lineTo(x,y)：绘制一条从当前位置到指定坐标的直线

绘制圆弧

arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。

arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

绘制贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)：参数 1 和 2：控制点坐标，参数 3 和 4：结束点坐标。

添加样式和颜色

fillStyle: 设置图形的填充颜色

strokeStyle：设置图形轮廓的颜色

lineWidth：线宽，默认是1

lineCap：设置线条末端样式。

butt：线段末端以方形结束

round：线段末端以圆形结束，

square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

lineJoin：同一个 path 内，设定线条与线条间接合处的样式。

round 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。

bevel 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。

miter(默认) 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。

setLineDash：制定虚线样式。

绘制文本

fillText(text, x, y [, maxWidth])：在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。

strokeText(text, x, y [, maxWidth])：在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。

绘制图片

drawImage(image, x, y, width, height)：绘制图片，参数分别为图片对象（可以new也可以是dom节点）、放置的x、y坐标，宽、高。

三、状态保存与恢复

save() 和 restore()：save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。

四、变形

translate(x, y)：移动 canvas 的原点到指定的位置

rotate(angle)：只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。

scale(x, y)：scale方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩 小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。