WEB前端第六十六课——H5新特性：canvas图形绘制
1.canvas描述
canvas（画布）是H5提出的新标签，其目的是用于替代类似flash动画或游戏的插件，
能够极大地减少页面结构大小，提高页面响应速度。
说明：
⑴ canvas标签仅是一个图形容器，提供了一个可以绘制图像、图形的区域，可以实时渲染
图形、动画、虚拟图像等，对快速绘图进行了大量优化；
⑵ 使用<canvas>标签习惯性在标签内部设置元素大小，以及进行不支持说明；
示例：<canvas width:300px height:360px><p>浏览器不支持“canvas”！</p></canvas>
当然，也可以通过CSS设置尺寸属性，还可以通过“if语句”判断浏览器是否支持canvas。
⑶ canvas标签除了提供绘图区域外，没有其他行为功能，其内部的所有内容都要通过脚本
（JavaScript）进行绘制完成；
⑷ 使用canvas的基础模板：
<body>
<!--创建canvas画布，并设置区域大小-->
<canvas id="myCanvas" width="200" height="300">
您的浏览器不支持Canvas！
</canvas>
<script>
// 获取canvas画布
var canvas=document.getElementById('myCanvas');
// 在画布上创建画笔
var ctx=canvas.getcontext('2d');
/* // 或通过if语句判断浏览器是否支持canvas
if (canvas.getcontext){
var ctx=canvas.getcontext('2d');
}else {
canvas.innerText='浏览器不支持canvas！';
}*/
// 在画布上绘制图形
ctx.fillRect(10,10,60,60);
</script>
</body>
⑸ 绝大部分Canvas的绘图API都没有定义在<canvas>元素本身上，而是定义在通过画布的
“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';
代码示例：
<body>
<!--创建canvas画布，并设置区域大小-->
<canvas id="myCanvas" width="360" height="360">
您的浏览器不支持Canvas！
</canvas>
<script>
// 获取canvas画布
var canvas=document.getElementById('myCanvas');
// 在画布上创建画笔
var ctx=canvas.getContext('2d');
// 在画布上绘制图形
ctx.fillRect(50,50,60,60);
ctx.strokeRect(30,30,100,100);
ctx.clearRect(70,70,20,20);
ctx.rect(150,150,60,60);
ctx.stroke(); //绘制出rect()方法定义的路径
// 通过反复清除、绘制，达到图像位移的效果。
var position=30;
var direction=1;
var timer=setInterval(function () {
if (position>=230){
direction=-1;
}else if (position<=10){
direction=1;
}
switch (direction) {
case -1:{
ctx.clearRect(position+19,position+19,102,102);
ctx.fillRect(position+20,position+20,60,60);
ctx.strokeRect(position,position,100,100);
ctx.clearRect(position+40,position+40,20,20);
position-=20;
}
break;
case 1:{
position+=20;
ctx.clearRect(position-21,position-21,102,102);
if (position<=130) {
ctx.fillRect(50,50,60,60);
ctx.strokeRect(30,30,100,100);
ctx.clearRect(70,70,20,20);
}
if (position>150&&position<=210) {
ctx.rect(150,150,60,60);
ctx.stroke();
}
ctx.fillRect(position+20,position+20,60,60);
ctx.strokeRect(position,position,100,100);
ctx.clearRect(position+40,position+40,20,20);
}
break;
}
},100);
</script>
</body>
3.路径绘制
canvas中路径是图形的基本元素，路径是不同颜色、宽度、长度的线段或曲线相连接形成的点线集合。
绘制路径的一般步骤：
⑴ beginPath()，路径绘制开始
⑵ moveTo(x,y)，设置笔触(落点)的坐标位置
⑶ lineTo(x,y)，设置线段的终点坐标位置
⑷ strokeStyle='color'，设置笔触绘画的颜色，默认为黑色
⑸ stroke()，执行路径绘制
⑹ fillStyle='color'，设置封闭路径内部填充颜色，默认为黑色
⑺ fill()，执行颜色填充
当使用fill()方法时，没有闭合的路径会自动闭合，可以不使用closePath()函数，
但stroke()方法不会自动闭合路径。
⑻ closePath()，路径绘制结束
使用路径开始和结束方法，可以确保各个路径之间的独立性。
代码示例：
<body>
<canvas id="myCanvas" width="500" height="300">
<p>Sorry，您的浏览器不支持Canvas！</p>
</canvas>
<script>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
// 创建未闭合路径，不进行填充
ctx.beginPath()
ctx.moveTo(70,80);
ctx.lineTo(70,150);
ctx.lineTo(120,150);
ctx.strokeStyle='yellowgreen';
ctx.stroke();
ctx.closePath();
// 创建未闭合路径，进行颜色填充
ctx.beginPath()
ctx.moveTo(170,80);
ctx.lineTo(170,150);
ctx.lineTo(220,150);
ctx.lineTo(270,110);
ctx.fillStyle='yellowgreen';
ctx.fill();
ctx.closePath();
</script>
</body>
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()”方法填充。
代码示例：
<body>
<canvas height="300" width="500" id="canvasArc">
您的浏览器不支持Canvas！
</canvas>
<script>
var canvas = document.getElementById('canvasArc');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(200,150,60,0,0.8*Math.PI,true);
ctx.strokeStyle='blue';
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(200,150,60,0,0.8*Math.PI,false);
ctx.strokeStyle='red';
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(200,150,60,1.5*Math.PI,0.3*Math.PI,false);
ctx.fillStyle='lightgreen';
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(200,150,60,1.5*Math.PI,0.7*Math.PI,true);
ctx.fillStyle='orange';
ctx.fill();
ctx.closePath();
</script>
</body>
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()方法，用于设置当前线条第一节的偏移量。
⑸ 代码示例：
<body>
<canvas id="canvasLineStyle" width="500" height="300"></canvas>
<script>
var canvas=document.getElementById('canvasLineStyle');
var ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(330,25);
ctx.lineTo(399,25);
ctx.lineTo(370,150);
ctx.lineWidth=8; //设置线条宽度
// ctx.lineCap='round'; //设置线条端点样式
// ctx.lineJoin='bevel'; //设置线条连接处样式
ctx.setLineDash([3,2,1]); //设置线条虚线样式
ctx.lineDashOffset=2; //设置虚线起始位置偏移量
var lineStyle=ctx.getLineDash(); //获取虚线样式
console.log(lineStyle);
ctx.stroke();
ctx.closePath();
ctx.strokeStyle="#e20213";
for (var i=0;i<6; i++){
ctx.lineWidth=2+i*5; //设置线条宽度
ctx.beginPath();
ctx.moveTo(5+i*50, 25);
ctx.lineTo(5+i*50, 150);
ctx.stroke();
ctx.closePath();
}
</script>
</body>
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”，即可进行绘制填充。
代码示例：
<body>
<canvas height="300" width="1000" id="canvasGradient"></canvas>
<script>
var canvas=document.getElementById('canvasGradient');
var ctx=canvas.getContext('2d');
// 创建线性渐变对象。
var linearGradient=ctx.createLinearGradient(50,50,100,100);
// 线性渐变对象颜色设置。
linearGradient.addColorStop(0,'red');
linearGradient.addColorStop(0.5,'yellow');
linearGradient.addColorStop(1,'yellowgreen');
// 线性渐变绘制。
ctx.beginPath();
ctx.fillStyle=linearGradient;
ctx.fillRect(10,10,150,150);
ctx.closePath();
// 创建径向渐变,外圆包含內圆。
var radialGradient=ctx.createRadialGradient(300,80,10,270,80,80);
radialGradient.addColorStop(0,'red');
radialGradient.addColorStop(0.5,'yellow');
radialGradient.addColorStop(1,'yellowgreen');
ctx.beginPath();
ctx.fillStyle=radialGradient;
ctx.fillRect(200,10,150,150);
ctx.fill();
ctx.closePath();
// 创建径向渐变，外圆不包含內圆。
var radialGradient=ctx.createRadialGradient(500,80,30,600,80,60);
radialGradient.addColorStop(0,'red');
radialGradient.addColorStop(0.5,'yellow');
radialGradient.addColorStop(1,'yellowgreen');
ctx.beginPath();
ctx.fillStyle=radialGradient;
ctx.fillRect(360,10,300,150);
ctx.fill();
ctx.closePath();
</script>
</body>
