WEB前端第六十六课——H5新特性：canvas图形绘制
1.canvas描述
canvas（画布）是H5提出的新标签，其目的是用于替代类似flash动画或游戏的插件，
能够极大地减少页面结构大小，提高页面响应速度。
说明：
⑴ canvas标签仅是一个图形容器，提供了一个可以绘制图像、图形的区域，可以实时渲染
图形、动画、虚拟图像等，对快速绘图进行了大量优化；
⑵ 使用
示例：
当然，也可以通过CSS设置尺寸属性，还可以通过“if语句”判断浏览器是否支持canvas。
⑶ canvas标签除了提供绘图区域外，没有其他行为功能，其内部的所有内容都要通过脚本
（JavaScript）进行绘制完成；
⑷ 使用canvas的基础模板：
⑸ 绝大部分Canvas的绘图API都没有定义在
“getContext()”方法获取的“绘图上下文环境”这个对象上；
⑹ canvas元素只支持一种原生的图形绘制：矩形，其他所有图形的绘制都至少需要生成一条路径。
2.上屏即像素化
上屏即像素化是canvas的一个重要特征，是指区域内图形一旦绘制完成，便不能更改，如尺寸、位置等。
只有通过清除内容再重新绘制的方式，实现改变绘制内容的效果。
下面以绘制矩形为例。
绘制矩形的相关方法：
⑴ fillRect( x ,y ,width, height)，绘制有填充的矩形；
⑵ strokeRect( x ,y ,width, height)，绘制无填充的矩形；
⑶ clearRect( x ,y ,width, height)，清除指定矩形内的像素；
⑷ rect( x, y, width, height) ，绘制矩形（定义矩形的路径），需要配合stroke()方法完成绘制。
另外，设置填充绘画的颜色，ctx.fillStyle='color';
代码示例：
3.路径绘制
canvas中路径是图形的基本元素，路径是不同颜色、宽度、长度的线段或曲线相连接形成的点线集合。
绘制路径的一般步骤：
⑴ beginPath()，路径绘制开始
⑵ moveTo(x,y)，设置笔触(落点)的坐标位置
⑶ lineTo(x,y)，设置线段的终点坐标位置
⑷ strokeStyle='color'，设置笔触绘画的颜色，默认为黑色
⑸ stroke()，执行路径绘制
⑹ fillStyle='color'，设置封闭路径内部填充颜色，默认为黑色
⑺ fill()，执行颜色填充
当使用fill()方法时，没有闭合的路径会自动闭合，可以不使用closePath()函数，
但stroke()方法不会自动闭合路径。
⑻ closePath()，路径绘制结束
使用路径开始和结束方法，可以确保各个路径之间的独立性。
代码示例：
4.圆弧绘制
绘制圆弧或者圆形，使用“arc()”方法。
语法：ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
说明：arc()方法一共有6个参数，表示以(x,y)坐标为圆心、radius为半径、从startAngle角度开始、
到endAngle角度结束，进行圆弧绘制，anticlockwise参数为布尔值，false表示顺时针绘制，
true表示逆时针绘制。
其中，arc()方法中的开始和结束角度单位是“弧度”，而不是度！
在JS中角度和弧度的换算表达式：radius=(Math.PI/180)*angleDegrees，也就相当于使用
“0~2”之间的任意数值乘以“Math.PI”得到相应的弧度。
另外，设置好圆弧路径之后，可以使用“Stroke()”方法进行绘制，也可以使用“fill()”方法填充。
代码示例：
5.线型设置
⑴ 设置线条宽度
语法：ctx.lineWidth=value;
⑵ 设置线条端点
语法：ctx.linCap=style;
说明：
lineCap有三种样式，butt（默认值）、round（圆形末端）、square（方形末端）
⑶ 设置线条连接处样式
语法：ctx.lineJoin=style;
说明：
lineJoin有三种样式，miter（默认值）、round（圆弧形）、bevel（切面形）
⑷ 设置线条虚线样式
语法：ctx.setLineDash([segment1,segment2,segment3,...]);
说明：
setLineDash()方法的参数是一个数组，数组内的value依次表示虚线每一节的长度，
数组内的值将在线条上循环重复使用。
getLineDash()方法，用于获取当前线条的虚线样式，返回值为数组。
lineDashOffset()方法，用于设置当前线条第一节的偏移量。
⑸ 代码示例：
6.Gradients渐变
⑴ 线性渐变
语法：ctx.createLinearGradient(x1,y1,x2,y2);
说明：该方法有4个参数，(x1,y1)表示渐变的起点，(x2,y2)表示渐变的终点。
该方法返回一个Gradient对象。
⑵ 径向渐变
语法：ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
说明：该方法有6个参数，(x,y,r)表示以(x,y)为圆心，以r为半径的圆，创建渐变区域。
该方法返回一个Gradient对象。
⑶ 颜色设置
语法：canvasGradient.addColorStop(position,color);
说明：该方法有2个参数，position的值为“0~1”之间的任意数，表示渐变颜色的相对位置，
参数color用于设置渐变色，可以是十六进制颜色值，也可以是rgba()颜色。
⑷ 渐变填充
创建Gradient对象，并设置渐变颜色，然后将Gradient对象赋予“fillStyle”，即可进行绘制填充。
代码示例：