关于Canvas中的小秘密你知多少？比如说有网格和坐标空间这种东西，我们还能用它画出各种形状来。别看Canvas只能画矩形，但是用路径把他们拼在一起，就能画出各种各样的图形！快来和我一起揭开Canvas的神秘面纱！
Canvas的网格和坐标空间
你看，在Canvas里边，画布就是个格子图，我们从上往下数，左往右看，起点就定在那，也就是(0,0)那个地方。每个格子里的小点点都有它专属的坐标，这好比玩拼图，知道了这些就能拼出好看的图和位置！所以咱们得先搞清楚这个坐标系统哟~
Canvas这东西看着抽象，但用着真的棒呆了！你就当它是一块画布，随便你怎么折腾，任意调整大小，翻转、缩放想咋整都行。专门为搞复杂图形的宝宝们量身定做滴！
绘制矩形的三个函数
fillRect(x,y,width,height) : Draws a filled rectangle strokeRect(x,y,width,height) : Draws a rectangular outline clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent
Canvas给咱们提供了三种画矩形的技巧：fillRect、strokeRect和clearRect。这些小工具基本上只需要四个参数就能搞定：x和y是矩形的起点坐标，width和height是它的长和宽。操作起来就跟喝口水似的容易！
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
填充矩形就是画出全色矩形；添加描边就是画出带线框的矩形；擦除区域，这个棒极了，尤其在制作动画或更换图片时非常实用。运用好这些方法，你就可以轻松地创造出炫酷无比的图形！
路径绘制的基本步骤
画路径有点费劲，需要好几步搞定。首先得用beginPath这东西开个新的路径通道；然后用moveTo把起点给定好；接下来就可以用lineTo啊或者arc那些方法来添加子路径了。
beginPath() closePath() stroke() fill()
画路径关键就在于把这些小路径巧妙拼接起来。试试用closePath把路径封口，或者用stroke和fill为路径加上框框或填上色彩。搞定这几招，画路径你也可以了！
moveTo方法的重要性
说到底画路径，就必须得掌握moveTo哟这神奇的函数！有了它，你不仅可以设定起点，还能用它画出连续不断的路径~比如画个笑脸，只需要找到合适的位置，然后用moveTo画个弧线就好。
用起来超方便的moveTo方法，能让你随便控制路径起点和终点，复杂图案也能轻松搞定。就是因为这种强大的自由度，Canvas变成了制作创意图形的神器！
arc方法的参数和用法
这arc函数就牛逼了！只需要你告诉它五件事儿，就能画出各种样式、规格的圆环或弧形：首先得标明圆心在啥地方，也就是x和y轴上的数字；然后再说下圆的长度；再然后是开始和结束的角度，简单说来就是起点在哪，终点又在哪；最后就是一个开关，用来控制是顺时针画还是逆时针画。调整好这些参数，你想要的弧线就出来了！
弧形图标、进度条啥的，或者那种花里胡哨的图形都能用到ARC。学好这几个参数，做图就快多了。
路径的闭合与填充
ctx.beginPath(); ctx.moveTo(75,50); ctx.lineTo(100,75); ctx.lineTo(100,25); ctx.fill();
别忘了闭合路径~试试用closePath或是fill法来结束路径，真的不用你亲手去画那个圆圈了呀。这样填充颜色才会更轻松容易！
学会用路径闭合和填充，就能画出更生动、更有立体感的图。这个话题对canvas相当关键！
复杂的图形绘制实践
只要摸透几种画画方法，你也能画出超炫的作品来！像那种只用几条弧线加直线就可以画出各种漂亮图案的技巧；或者是通过巧妙组合各种形状，就可以制造出极具动感的图标。
实践出真知！试试看犯点小错误、调整下技术高度，画出的东西自然就变酷炫，更能引人注目哟。
Canvas在现代网页设计中的应用
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
ctx.beginPath();
ctx.moveTo(40,75);
ctx.lineTo(60,65);
ctx.lineTo(90,65);
ctx.moveTo(110,75);
ctx.lineTo(125,75);
ctx.stroke();
Canvas不止是用来画画的，用好了它还可以在网页设计中发挥大作用！不论是你想要制作让人眼前一亮的互动图表，或是逼真的动态背景，亦或者是酷炫至极的动画效果，Canvas都能助你实现，激发你无限的创意思维。
Canvas画图超赞！学好了你网站访问量就能飙升，交互性强了，立即会抓住大家眼球，还提升用户感受喔。
总结与展望
// 填充三角形 ctx.beginPath(); ctx.moveTo(25,25); ctx.lineTo(105,25); ctx.lineTo(25,105); ctx.fill(); // 勾边三角形 ctx.beginPath(); ctx.moveTo(125,125); ctx.lineTo(125,45); ctx.lineTo(45,125); ctx.closePath(); ctx.stroke();
阅读完毕后，觉得Canvas的网格和坐标系统是不是已经摸得七七八八？它可是能帮我们画出各种图形的好帮手。关键是，Canvas除了好用的绘画工具外，还支持随心所欲地调坐标系，想画啥就能画啥！
你们有没有想过未来Canvas会变成什么样？评论区留下你们的观点，别忘了点赞支持下我，让更多人也都见识到Canvas的强大头衔！
arc(x, y, radius, startAngle, endAngle, anticlockwise)
评论0