微客导航 » 文章资讯 » JavaScript canvas绘制圆弧与圆形

JavaScript canvas绘制圆弧与圆形

2023-08-01 09:13:04 287

本文实例为大家分享了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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JavaScript canvas绘制圆弧与圆形

热门推荐

随机推荐