Canvas——路径使用的一些感悟
路径使用的一些总结：
moveTo()和lineTo()函数都是用来移动点，绘制路径的函数，绘制完成后，调用closePath()函数，它会创建一条由描点的终点通向起点的虚拟路径，闭合整个路径，然后调用stroke()函数进行描边，最后可以用fill()函数来填充样式。
简单的实例代码如下：
<!DOCTYPE HTML><html><head><meta charset="utf-8"><!--函数 S--><script type="text/javascript">function canFun(){var canvas=document.querySelector("canvas");var context=canvas.getContext("2d");<!--五角星路径 S-->context.moveTo(76,197);context.lineTo(421,197);context.lineTo(143,399);context.lineTo(248,71);context.lineTo(356,399);context.lineTo(76,197);<!--五角星路径 E--><!--中心区域渐变 S-->var radGrad=context.createRadialGradient(200,190,2,250,250,1800);radGrad.addColorStop(0.0,"white");radGrad.addColorStop(0.05,"yellow");context.fillStyle=radGrad;<!--中心区域渐变 E--><!--描边和填充 S-->context.closePath();context.lineWidth = 8;context.stroke();context.fill();<!--描边和填充 E--><!--保持位置居于浏览器中心 S-->canvas.style.position="absolute";canvas.style.top=(document.documentElement.clientHeight-500)/2+"px";canvas.style.left=(document.documentElement.clientWidth-500)/2+"px";<!--保持位置居于浏览器中心 E-->}window.onload=window.onresize=canFun;</script><!--函数 E--></head><body><canvas width="500" height="500" >该浏览器不支持canvas.</canvas></body></html>
效果如下面的图片：
附加：绘制五角星的不同姿势
function draw(id){var canvas = document.getElementById(id);var context = canvas.getContext('2d');context.fillStyle = "green";context.fillRect(0,0,150,150);var r = 40;context.translate(75,75);context.beginPath();context.fillStyle="yellow";context.moveTo(r,0);for(var i=0;i<9;i++){context.rotate(Math.PI/5);if(i%2 == 0) {context.lineTo((r/0.525731)*0.200811,0);} else {context.lineTo(r,0);}}context.closePath();context.fill();context.stroke();}<canvas id="canvas" width="150" height="150"></canvas>
画出来的效果如下图：
这个画法不熟悉canvas操作的话，上来看可能会有点懵。（其实我也是看了一会才明白）
下面分解一下这种画法：
这样的：
（1）context.translate(75,75);将画布起点移动到了上面画的矩形的中心；
（2）context.moveTo(r,0);设置的是五角星的起点，就是第1个点；
（3）然后进入for循环，绘制剩下的9个点。每次绘制点前，都会调用context.rotate(Math.PI/5);函数，将画布以上面第一个步骤里移动后的点（就是矩形的中心）为中心，旋转PI/5;
然后就是两种情况了，偶数的时候，移动context.lineTo((r/0.525731)*0.200811,0);这个距离，例如i=0的时候，就是上面图上的第2个点；
奇数的时候，移动context.lineTo(r,0);这个距离，例如i=1的时候，就是上图的第3个点，这样画完9个点，加上起点，正好就是一个完整五角星的10个点了，关闭路径，绘制就出现图形了。
（2）五个点的画法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas7</title><script>function draw(id){var canvas = document.getElementById(id);var context = canvas.getContext("2d");context.fillStyle = "#eeeeef";context.fillRect(0,0,500,500);context.shadowOffsetX = 10;context.shadowOffsetY = 10;context.shadowColor = "rgba(100,100,100,0.5)";context.shadowBlur = 3.5;context.translate(0,50);for(var i=0;i<3;i++){context.translate(100,100);create5Star(context);context.fill();}}function create5Star(context){var dx = 100;var dy = 0;var s = 50;context.beginPath();context.fillStyle = "rgba(255,0,0,0.5)";var x = Math.sin(0);var y = Math.cos(0);var dig = Math.PI/5*4;for(var i = 0;i<5;i++){var x = Math.sin(i*dig);var y = Math.cos(i*dig);context.lineTo(dx+x*s,dy+y*s);}context.closePath();}</script></head><body onload="draw('canvas')"><canvas id="canvas" width="500" height="500"></canvas></body></html>
效果如下图：
