canvas绘图过程：
/*要有画布：canvas标签：宽和高是不能通过css3来设置，宽和高不能有px
*创建绘图的对象
*开始的位置
*结束的位置
*画
*/
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<canvas width="800" height="600"></canvas>
<script>
//获取画布
var can=document.querySelector("canvas");
//获取绘图对象
var ctx=can.getContext("2d");
//开始的位置
ctx.moveTo(100,100);
//结束的位置
ctx.lineTo(300,100);
//设置线的颜色
ctx.strokeStyle="red";
//设置线的宽度
ctx.lineWidth=10;
//绘制
ctx.stroke();
//重置路径
ctx.beginPath();//作用是为防止下方的stroke()又重新画了一遍
//再画一条线
ctx.moveTo(200,200);
ctx.lineTo(400,200);
ctx.strokeStyle="green";
ctx.lineWidth=10;
ctx.stroke();
ctx.beginPath();
</script>
小例子：1.画一个三角形(闭合路径)
var can=document.querySelector("canvas");
var ctx=can.getContext("2d");
ctx.moveTo(100,100);
ctx.lineTo(100,300);
ctx.lineTo(300,300);
ctx.closePath();//闭合路径，画图就差最后一步合并了，那么此时可以使用
ctx.stroke();
2.canvas连接
//设置连接处的样式
ctx.lineJoin="bevel";//round圆角 bevel平角 miter默认的尖角
//线帽样式(线的两端)
ctx.lineCap="round";//round square butt(默认)
3.非零环绕
原理：我们在要填充的区域内放置一原点，引出一条射线，默认记为0，与其相交的边如果是逆时针的，记为-1，顺时针记为+1，如果有多条相交线，加起来如果为0则改区域不填充。
var can=document.querySelector("canvas");
var ctx=can.getContext("2d");
//顺时针
ctx.moveTo(100,100);
ctx.lineTo(400,100);
ctx.lineTo(400,400);
ctx.lineTo(100,400);
ctx.closePath();
ctx.stroke();
//逆时针
ctx.moveTo(250,150);
ctx.lineTo(150,250);
ctx.lineTo(200,250);
ctx.lineTo(200,350);
ctx.lineTo(300,350);
ctx.lineTo(300,250);
ctx.lineTo(350,250);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="black";
ctx.fill();
4.线性渐变
var can=document.querySelector("canvas");
var ctx=can.getContext("2d");
//创建渐变方案
//起始位置的横纵坐标，结束位置的横纵坐标
var lgd=ctx.createLinearGradient(100,100,500,100);
//添加渐变颜色
//0开始的，1结束，0-1之间的小数
lgd.addColorStop(0,'red');
lgd.addColorStop(0.5,'green');
lgd.addColorStop(1,'blue');
//把渐变的方案给strokeStyle
ctx.strokeStyle=lgd;
ctx.moveTo(100,100);
ctx.lineTo(500,100);
ctx.lineWidth=20;
ctx.stroke();
5.径向渐变
var can=document.querySelector("canvas");
var ctx=can.getContext("2d");
//创建渐变方案
//开始的横纵坐标，半径，结束的横纵坐标，半径
var rgd=ctx.createRadialGradient(200,150,50,200,150,100);
//添加渐变的颜色
rgd.addColorStop(0,'red');
rgd.addColorStop(0.5,'green');
rgd.addColorStop(1,'blue');
//设置填充的样式
ctx.fillStyle=rgd;
ctx.moveTo(100,50);
ctx.lineTo(300,50);
ctx.lineTo(300,300);
ctx.lineTo(100,300);
ctx.closePath();
ctx.stroke();//绘制
ctx.fill();//填充
6.虚线
//虚线 参数：是一个数组，第一个线的长度，第二个空白的长度
ctx.setLineDash([20,5,10]);//实线部分和白线部分的大小依次是20,5,10
ctx.stroke();
7.弧度
//绘制弧度：圆心坐标，半径，开始的弧度，结束的弧度，默认顺时针(false)
ctx.arc(200,150,50,Math.PI/2,2*Math.PI,true);//Math.PI代表180度
ctx.stroke();
8.文本
var can=document.querySelector("canvas");
var ctx=can.getContext("2d");
ctx.moveTo(300,0);
ctx.lineTo(300,400);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0,200);
ctx.lineTo(600,200);
ctx.stroke();
//绘制文本 是像素和字体
ctx.font="50px 全新硬笔新书简";
//设置文本的对齐方式
ctx.textAlign="center";//left|right|center
ctx.textBaseline="middle";//top|bottom|alphabetic(默认)
//设置阴影的颜色
ctx.shadowColor="red";
//水平方向偏移量
ctx.shadowOffsetX=15;
ctx.shadowOffsetY=5;
//阴影的模糊度
ctx.shadowBlur=5;
//绘制文本，镂空效果；参数1：文字内容，参数2：横坐标，参数3：纵坐标
ctx.strokeText("绘制文本",300,200);
//填充文本
ctx.fillText("绘制文本",300,200);
9.图片
var can=document.querySelector("canvas");
var ctx=can.getContext("2d");
//绘制图片
var img=document.createElement("img");
img.src="0.jpg";
//图片和画图发生关系,才可以绘制这个图片
//图片加载
img.onload=function(){
ctx.drawImage(img,100,100,200,100);
//图片对象，图片选择的横纵坐标，图片的宽和高，画布的横纵坐标，画布让图片显示的宽和高
ctx.drawImage(img,180,50,350,170,100,100,350,170);
};
10.动画矩形
原理：开定时器：清理画布，重新画
var can=document.querySelector("canvas");
var ctx=can.getContext("2d");
var x=0;//开始的坐标
var step=5;//每次移动的步数
var i=1;//标记(设置矩形向右移动后再回来)
setInterval(function(){
//清理画布
ctx.clearRect(0,0,can.width,can.height);
ctx.fillStyle="green";
ctx.fillRect(x,100,100,200);//参数：横纵坐标，宽和高；fillRect()方法用于绘制已填充的矩形
ctx.stroke();
x+=step*i;//控制横坐标
if(x>can.width-100){
i=-1;
}else if(x<=0){
i=1;
}
},10);
11.画布平移
var can=document.querySelector("canvas");
var ctx=can.getContext("2d");
//平移画布的原点，默认原点在左上角
//设置画布原点平移
ctx.translate(100,100);
//画一条线
ctx.moveTo(0,0);//仍然是0,0位置为起始点
ctx.lineTo(100,0);
ctx.lineWidth=10;
ctx.strokeStyle='green';
ctx.stroke();
12.旋转
ctx.rotate(Math.PI/2);//90度
13.缩放
var can=document.querySelector("canvas");
var ctx=can.getContext("2d");
ctx.translate(300,200);
//缩放的比例
ctx.scale(2,0.5);//参数1相对于原来的横坐标的缩放值，参数2相对于原来纵坐标的缩放值
ctx.arc(0,0,100,0,2*Math.PI);//开始弧度0，结束弧度360，这是一个圆
ctx.stroke();
