图形属性：
fillStyle：填充颜色。
font：绘制文本的时候css字体
globalAlpha：绘制像素时添加的透明度
gloablCompositeOperation：合并新的像素点和下面的像素点
lineCap：渲染线段的末端
lineJoin：渲染顶点
lineWidth：边框的宽度
miterLimit：斜接顶点的最大长度
textAlign：文本水平对齐方式
textBaseline：文本垂直对齐方式
shadowBlur：阴影清晰度或模糊程度
shadowColor：下拉阴影的颜色
shadowOffsetX：阴影的水平偏移量
shadowOffsetY：阴影垂直偏移量
strokeStyle：边框线颜色
图形方法：
fillRect()： x坐标 y坐标 宽度 高度 （绘制矩形）
arc()： x坐标 y坐标 r半径 起始角 结束角 设置顺时针(false)还是逆时针(true)（圆形）
fill()：填充路径
fillRect()： x y 宽度 高度
beginPath()：新路径
moveTo()：新的子路径 有x，y轴
clineTo()：该点与新点通过直线连接 有x，y轴
stroke()：绘制边框线
arcTo()：绘制一条直线与一段圆弧 弧的起始坐标x 弧的起点坐标y 弧的结束坐标x 弧的结束坐标y 弧的半径r
bezierCurveTo()：当前子路径添加一个新点，利用三次贝塞尔曲线相连。
quadrticCurveTo()：与上面类似，只不过它使用二次贝塞尔曲线。
closePath()：边框线闭合
clearRect()：与fillRect()类似 不过它会忽略当前填充样式，采用透明的黑色像素
rect()：用于绘制矩形，会对当前路径产生影响，它会将指定的矩形添加到当前路径的子路径中。
createPattern()：第一参数指定了用做图案的图片，必须是文档中的一个img、canvas或video元素。第二参数通常是repeat，表示采用重复的图片填充。还可以使用repeat-x、repeat-y、no-repeat。
createRadialGradient()：用来创建放射状、圆形渐变对象。
参数为：渐变开始圆的x坐标、y坐标、半径、结束x坐标、结束y坐标、结束半径r
createLinearGradient()：用来创建线性渐变。
参数为：渐变开始的x坐标，y坐标，结束x左边，结束y坐标
addColorStop()：定义渐变的颜色。
参数：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。二参数是css颜色
fillText()：用于给画布添加文本。参数：text、文本x坐标、y、允许文本最大宽度
strokeText()：也是添加文本，不过无填充。参数：同上。
clip()：定义一个裁剪区域，定义了之后，该区域不会绘制任何内容。
save()：此方法将当前状态推送到堆栈上。
restore()：此方法弹出堆栈上的顶级状态，将上下文恢复到该状态。
setTransform()：直接设置画布的变换矩阵。
参数：水平旋转、水平倾斜、垂直倾斜、垂直缩放、水平移动，垂直移动。
translate()：将坐标原点进行上下左右移动。
参数：添加到水平坐标x上的值，添加到垂直坐标y上的值
scale()：实现对x、y轴上的距离进行延长和缩短。
参数：缩放当前绘图的宽度(1=100%,0.5=50%…)、也是缩放的高度
drawImage()：用于将源图片的像素内容复制到画布上，还可以对图片进行缩放旋转。
参数：规定的(图片,画布,视频)、开始剪切的x坐标、y坐标、被剪切的宽度、高度、
在画布上放置图形的x坐标、y坐标、要使用图像的宽度、高度。
toDataURL()：方法将画布中内容抽取成一张图片，PNG图片形式返回。同时编码成一个字符串数据，可以在img上使用。
getImageData()：复制画布上执行矩形的像素数据。
参数：开始复制的x坐标，y坐标、复制矩形区域的宽度、高度。
putImageData()：拿到复制的像素，且将数据放回画布。
参数：要回放的数据、画布的x坐标，y坐标、水平值x，水平值y、在画布上绘制图像所使用的宽度、高度。
// 检测
isPointInPath()：指定的点是否在当前路径中，返回true表示在当前路径，反之false。
使用：
注意绘制的顺序，否则不会生效。
画布的默认坐标系统是以画布最左上角为原点。
1 <canvas id='square' width10 height=200> 2 <canvas id='circle' width=10 height=100> 3 </canvas> 4 <script> 5 var canvas = document.getElementById("square"); // 获取画布元素 6 var context = canvas.getContext("2d"); // 获取2d绘制上下文 7 context.fillStyle = 'red'; // 填充颜色 8 context.fillRect(0,0,10,10); // x y width height 9 10 canvas = document.getElementById("circle"); // 画布第二个元素 11 context = canvas.getContext("2d"); // 绘制 12 context.beginPath(); // 开始一条新的路径 13 context.arc(5,5,5,0,2*Math.PI,true); // 将圆形添加到该路径中 14 context.fillStyle = 'bule'; // 填充颜色 15 context.fill(); // 填充路径 16 </script>
绘制线段、填充多变形
var canvas = document.getElementById("my_canvas_id"); // 拿到要绘制的元素 var context = canvas.getContext("2d"); // 绘制2d context.beginPath(); // 开始新路径 context.moveTo(100,100); // x y轴 定义新的子路径 context.lineTo(200,200); // 绘制一条线段 x轴200 y轴200 context.lineTo(100,200); // 再绘制一条线段 context.fill(); // 填充路径 context.closePath(); // 边框线闭合 context.stroke(); // 绘制边框线