1.canvas标签
<canvas id="canvas">
你的浏览器不支持canvas，请升级浏览器.
</canvas>
2.canvas绘图上下文context
var canvas = document.getElementById( 'canvas' ); //获得画布
var ctx = canvas.getContext( '2d' );//注意：2d小写， 3d：webgl
1)上下文，所有绘制操作api的入口。
2)canvas本身无法绘制任何内容，canvas的绘图是使用Javascript操作的。
3.基本的绘制路径
3.1 设置绘制起点（moveTo）
语法：ctx.moveTo(x,y)
注意：1、设置上下文绘制路径的起点。
2、 x，y都是相对于canvas 盒子的左上角。
3、 绘制线段必须先设置起点。
3.2 设置直线（lineTo）
语法：ctx.lineTo(x,y)
注意：1、从x,y的位置绘制一条直线到起点或者上一个线头点。
3.3 路径开始和闭合
开始路径 ctx.beginPath();
闭合路径 ctx.closePath();
注意：1、绘制不同状态的线段或者形状，必须使用开始新路径的方法把不同的绘制操作隔开。
2、闭合路径会自动把最后的线头和开始的线头连在一起。
3.4 描边（stroke）
语法：ctx.strokeStyle = "rgb(255,0,0)";
ctx.stroke();
注意：1、根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke。
3.5 填充（fill）
语法：ctx.fillStyle="green";
ctx.fill();
注意：1、将闭合路径的内容填充具体的颜色。
3.6 绘制矩形
语法：创建矩形：ctx.rect(x,y,width,height)
描边矩形：ctx.strokeRect(x,y,width,height)
填充矩形：ctx.fillRect(x,y,width,height)
清除矩形：ctx.clearRect(x,y,width,height)
注意：1、x,y为矩形左上角坐标。
2、该方法只是规划了路径，并没有填充和描边。
3、需加ctx.fill()以填充 || ctx.stroke()描边
3.7 绘制圆形（arc）
语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
注意：1、x,y圆心坐标。
2、r半径
3、sAngle绘制开始的弧度，圆心到最右边点是0度，顺时针方向弧度增大。
4、eAngle结束的弧度，单位π
5、counterclockwise是否逆时针，true逆时针
6、弧度角度转换：rad = deg*Math.PI/180;
true为逆时针，false为顺时针
4.canvas颜色样式和阴影
4.1 颜色
ctx.fillStyle : 设置或返回用于填充绘画的颜色
ctx.strokeStyle: 设置或返回用于笔触的颜色
4.2 阴影
ctx.fillStyle = "pink"
ctx.shadowColor = "阴影颜色";
ctx.shadowBlur = 正数（模糊级别）;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillRect(100, 100, 100, 100);
5.canvas文本and渐变and图像
5.1 文本
语法：1、font - 定义字体
2、fillText(text,x,y) - 绘制实心文本
3、strokeText(text,x,y) - 绘制空心文本
案例：
ctx.strokeStyle = "blue";
ctx.font = "30px Arial";
ctx.fillText("hello world",10,50);
（高30px、Arial字体的蓝色实心文字）
5.2 渐变
语法：1、createLinearGradient(x,y,x1,y1) - 线条渐变
2、createRadialGradient(x,y,r,x1,y1,r1) - 径向渐变
案例：
(创建渐变、填充渐变)
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;
ctx.fillRect = "10,10,100,100"
5.3 图像
ctx.drawImage(image，10，10)
网友评论