Canvas就是HTML5里面的一个神器，让我们能随便在网上画图~有了这个家伙，咱们就能画出曲线和圆形这些东西！Canvas其实就是个画布，咱们就可以在上面自由发挥！
了解arc方法
Canvas绘制弧线和圆
#canvas{ border: 1px solid #aaa; text-align: center;
}
当用户浏览器不支持Canvas,请更换浏览器重试！
想画弧线或者圆的话就要用到Canvas里的arc方法！这玩意儿有6个参数~包括圆心在哪（X,Y），多大的圈子（半径大小），起点和终点的角度还有个能控制方向的布林值。了解好这些，就能轻松画出想要的弧形咯~
绘制单个弧线
好，咱们先来画条圆弧！只要随意选起点和终点，就能画出各种弯弯曲曲的线条了。这个过程其实就像转动一道旋转门，换个角度看，就是不一样的弧线。
绘制多个弧线
搞定单个弧线后，咱们就来试试画多条弧线，最后把它们拼起来看看能形成一整个圆不？其实这跟玩儿拼图差不多，每个弧线就像拼图里的小块，把它们凑一凑，大圆就出来！
绘制圆的技巧
想要画好圆，得时刻留意起点和终点的角儿。一旦没弄对，画出的就是残缺不全或是奇形怪状的图了。跟调钟表针似的，一丁点儿不准都会影响到时间。
实战案例分析
咱们通过实际操作来深入了解怎么用arc方法画圈和弧线！过程中，我还会依次列举各案例以及对应的效果图，这样你就能慢慢学会如何绘画咯。
常见问题与解决
画图时，难免会碰到图形显示残缺或角度不对这样的小状况。了解并记住这些棘手的问题及应对方式，就能防止在实践中再犯这种低级失误！
绘图的创意应用
var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");
context.lineWidth=5;
context.strokeStyle="blue"context.arc(300,300,200,0,2*Math.PI);
context.stroke();//画一个空心弧线
context.fillStyle="red"
context.fill();//收尾直接相连为一个封闭图形，以红色填充该图形
不只是画画，也有各种创意玩法。能用Canvas画出各种效果，不仅能放在网页上，甚至还能做出复杂的人物和环境！
进阶技巧与扩展
如果你有基础画图技巧了，那我们再教点高难度的，比如用贝塞尔曲线画出复杂的图案，或结合JavaScript做出动态的绘画。
总结与展望
window.onload= function () { var canvas=document.getElementById("canvas"); if(canvas.getContext("2d")){ var context=canvas.getContext("2d");
context.lineWidth=5;
context.strokeStyle="red";
for(var i=0;i<10;i++){//绘制十个弧线，收尾封闭，没有填充色
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.closePath();//使弧线封闭，形成一个闭合图形
context.stroke();
} for(var i=0;i<10;i++){//绘制十个弧线，收尾不封闭，没有填充色
context.beginPath();
context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10);
context.stroke();
} for(var i=0;i<10;i++){//绘制十个弧线，收尾封闭且填充为默认色
context.beginPath();
context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true);//逆时针绘制
context.fill();
}
}else {
alert("不支持canvas,请更换浏览器！")
}
};
这篇文章就是教咱们怎样画出漂亮的弧线和圆形。原来画图也有这么多小窍门儿！我相信学过这个之后，你肯定会在画图这条路上飞速进步。
最后，小编想问下你们：有没有试着用Canvas画点好玩儿东西呀？快来评论晒出你的杰作或心得，还记得给文章点赞并转发！
评论0