本文摘自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();
|
绘制了一个弧线之后,让我们尝试绘制多个弧线,以致为一个圆,直接上代码:
阅读剩余部分
相关阅读 >>
详细介绍html5 canvas基本绘图之绘制线段代码实例
javascript canvas方法有哪些
html5canvas的讲解以及实例教程
怎么使用canvas绘制虚线
h5canvas实现刮刮乐效果代码
canvas橡皮筋式线条绘图的方法介绍(代码示例)
h5动画--canvas绘制圆环百分比进度的实例
如何在canvas里面基于随机点绘制一个多边形
canvas绘制各种基本图形
canvas绘制奥运五环代码分享
更多相关阅读请进入《canvas》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 怎样用canvas来绘制弧线和圆