JavaScript canvas绘制圆弧与圆形
本文实例为大家分享了canvas绘制圆弧与圆形的具体代码,供大家参考,具体内容如下
canvas绘制圆弧
绘制圆弧使用context.arc()函数,包含六个参数。
context.arc( centerx,centery,radius, startingAngle,endingAngle, anticlockwise=false )
分别代表:圆心x值,圆心y值,半径,开始的弧度值,结束的弧度值,(是否逆时针)。
例如:
window:onload=function(){ varcanvas=document.getElementById("canvas"); varcontext=canvas.getContext("2d"); canvas.width=800; canvas.height=800; context.lineWidth=5; context.strokeStyle="#005588"; context.arc(300,300,200,0,1.5*Math.PI) context.stroke(); }
当需要绘制多条圆弧时,还是需要调用context.beginPath()和context.closePath()。但是当使用context.closePath()时,会自动将图形封闭,因此如果需要绘制不封闭圆弧,可以省略context.closePath()。
绘制实心圆
跟之前的多边形一样,使用context.fill(),代码:
Document