canvas web api手册

1.canvas元素

<canvas id="canvas" width="150" height="150"></canvas>

2.渲染上下文

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

3.检查支持性

var canvas = document.getElementById('canvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

4.栅格
在我们开始画图之前，我们需要了解一下画布栅格（canvas grid）以及坐标空间。上面的HTML模板中有个宽150px, 高150px的canvas元素。如下图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。

5.绘制矩形

    //绘制一个填充的矩形
    fillRect(x, y, width, height)
    //绘制一个矩形的边框
    strokeRect(x, y, width, height)
    //清除指定矩形区域，让清除部分完全透明。
    clearRect(x, y, width, height)

6.绘制函数
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径

beginPath()

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

closePath()

通过线条来绘制图形轮廓。

stroke()

通过填充路径的内容区域生成实心的图形。

	fill()

将笔触移动到xy点

moveTo(x, y)

绘制一条从当前点到xy点的直线

lineTo(x, y)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆）。从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。
startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:
*弧度=(Math.PI/180)角度。

arc(x, y, radius, startAngle, endAngle, anticlockwise)

根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

arcTo(x1, y1, x2, y2, radius)

绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

quadraticCurveTo(cp1x, cp1y, x, y)

绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

7.颜色
设置图形的填充颜色。

fillStyle = color|gradient|pattern
color
    DOMString 字符串，被转换成 CSS <color> 颜色值.
gradient
    CanvasGradient 对象 （线性渐变或者放射性渐变）.
pattern
    CanvasPattern 对象 （可重复图像）。 

设置图形轮廓的颜色。

strokeStyle = color|gradient|pattern

本文参考链接
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API