Canvas的使用
1. 创建<canvas>
创建<canvas>元素并声明width、height和
<canvas width="600" height="400"></canvas>
2. JS中获取组件
1. JS获取组件
//querySelector返回值类型为静态NodeList集合，是克隆整个对象，所以速度慢
var mycanvas=document.querySeletor('canvas');
//getElementsByTagName返回值类型为动态HTMLCollection集合，是复制对象的索引，速度快
var mycanvas=document.getElementsByTagName('canvas');
2. 获取上下文
ctx=mycanvas.getContext('2d');
3. 获取画布宽高
<!--DOM方式-->
var canvasHeight=mycanvas.height;
<!--上下文方式-->
var canvasHeight=ctx.canvas.height;
3. 画线条
知识点：
问题：在画一条线条时，描边默认值是1px和黑色，但视觉效果上看是2px和灰色
原因：因为在绘制时是在两个像素点之间开始绘制的，设备像素不支持0.5px，所以用2px和灰色来表示
解决方案：绘制时把位置+/-0.5px
填充原则：非零环绕
说明：顺时针绘制的线条为1，逆时针为-1。从要判断的区域拉一条线出去，将与其相交的线条相加减，若结果为0则不填充，反之填充。
ctx.beginPath(); //开启新路径，解决多个路径绘制时，样式会覆盖的问题
ctx.closePath(); //关闭路径，解决手动闭合的缺角问题
ctx.moveTo(100,100); //记录开始位置
ctx.lineTo(100,200); //画线
ctx.stroke(); //描边
ctx.strokeStyle='blue'; //描边颜色
ctx.lineWidth=10; //描边宽度
ctx.fill(); //填充
ctx.fillStyle='red'; //填充颜色
ctx.lineCap='round'; //线条头部样式，有butt（默认）、square、round，后两者会长出一部分
ctx.lineJoin='round'; //线条拐点样式，有miter（默认）、round、bevel（平的）
ctx.setLineDash([5,10,15]); //设置线条为虚线的排列方式，数组的每个数代表[虚线长度，空格长度，虚线长度...]
ctx.getLineDash(); //获取的是不重复排列的数组
ctx.lineDashOffset=-1; //正值往左（后）偏移
4. 绘制矩形/圆弧
1. 绘制矩形
<!--不是独立路径-->
ctx.rect(x,y,width,height);
<!--独立路径-->
ctx.strokeRect(x,y,width,height);
ctx.fillRect(x,y,width,height);
2. 擦除矩形
ctx.clearRect(x,y,width,height);
3. 创建渐变方案
var linearGradient=ctx.createLinearGradient(x0,y0,x1,y1); //起始点坐标->终点坐标
linearGradient.addColorStop(0,'pink'); //（位置，颜色）
ctx.fillStyle=linearGradient; //应用渐变方案
4. 绘制圆弧
知识点：
弧度长度=半径长度
圆的周长=2Πr
一个圆的弧度：2Π
一个角度=Π/180弧度
ctx.arc(圆心坐标x,圆心坐标y,半径,起始位置弧度,结束位置弧度,默认绘制方向顺时针false);
5. 绘制文字
var str='Hello World!';
ctx.font='40px Microsoft HeiTi'; //字号，字体
ctx.textAlign='start'; //left,start,right,end,center（其中start和end与direction属性有关）
ctx.direction='rtl'; //ltr,rtl
ctx.textBaseLine='center'; //top,bottom,center
ctx.strokeText(str,x0,y0); //字符串，起始坐标（起始坐标默认位于文字左下角）
ctx.fillText(str,x0,y0);
ctx.measureText(str).width; //获取文字宽度
6. 绘制图片
<!--把图片加载进内存，但不渲染到页面的几种方式-->
1. DOM加载
var image=document.createElement('img');
2. new对象加载
var image=new Image();
3. drawImage()用法
//三个参数
drawImage(image,x0,y0); //image为图片对象，x0和y0位于图片左上角
//五个参数，用于缩放图片
drawImage(image,x0,y0,width,height);
//九个参数，用于裁剪图片
drawImage(image,x0,y0,w0,h0,x1,y1,w1,h1); //x和y为在图片/画布上的定位，w和h为在图片画布上的宽高
4. 绘制图片过程
//创建对象
var image=new Image();
//绑定加载完成事件
image.onLoad=function(){
ctx.drawImage(image,x0,y0,width,height);
}
//设置图片路径
image.src='image/01.jpg';
7. 绘制帧动画
原理：使用setInterval()，每次在绘制前使用clearRect()清除一下画布，然后使用drawImage()把图片绘制出来，实现动画效果
8. 坐标轴的转换
知识点：
1. 坐标轴原点的重定位
ctx.translate(100,100);
2. 坐标轴的缩放
ctx.scale(0.5,1);
3. 坐标轴的旋转
ctx.rotate(Math.PI/2); //弧度
