本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来怎样用canvas来绘制弧线和圆,用canvas来绘制弧线和圆的注意事项有哪些,下面就是实战案例,一起来看一下。html文件如下所示:
1 2 3 4 5 6 | <!DOCTYPE html><html lang= "en" ><head>
<meta charset= "UTF-8" />
<title>Canvas绘制弧线和圆</title></head><body><style>
#canvas{ border: 1px solid #aaa; text-align: center;
}</style><canvas id= "canvas" width= "800" height= "800" >
当用户浏览器不支持Canvas,请更换浏览器重试!</canvas></body></html>
|
绘制弧线或圆需要使用arc方法,首先,让我们了解一下这个方法:
context.arc( x,y,r,sAngle,eAngle,counterclockwise);
该方法共有6个参数:
x :圆心x轴坐标
y:圆心y轴坐标
r:半径
sAngle:弧线起始位置
eAngle:弧线终止位置
counterclockwise:可选参数,默认为false,规定应该逆时针还是顺时针绘图。false = 顺时针,true = 逆时针。
首先,让我们开始绘制一条弧线,代码如下:
1 2 3 4 5 6 | 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绘制饼图的方法介绍(代码)
html5 canvas绘制五角星的方法
html5 canvas实现绘制一个像素宽的细线
canvas与svg的区别有什么?canvas和svg的区别比较
canvas如何实现二维码和图片合成的代码
html5和js绘制图片到canvas的方法
怎样用canvas来绘制弧线和圆
html5的canvas实现绘制曲线的方法
html5 canvas如何绘制圆形?(代码实例)
canvas实现圆形进度条并显示数字百分比
更多相关阅读请进入《canvas》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 怎样用canvas来绘制弧线和圆