canvas绘制圆弧、扇形 && 文字【从0开始学习canvas—第3篇】

最新推荐文章于 2023-10-06 00:53:38 发布

羊二哥

最新推荐文章于 2023-10-06 00:53:38 发布

阅读量1.3k

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/weixin_43586120/article/details/104734672

版权

这篇博客主要介绍了如何使用canvas进行圆弧和扇形的绘制，以及在canvas上添加文字的方法，是canvas学习系列的第三篇文章。

摘要由CSDN通过智能技术生成

1、canvas绘制圆弧、扇形

arc(x,y,r,startAngle,stopAngle[,anticlockwise])

x,y : 圆心坐标

r : 绘制的半径

startAngle,stopAngle : 起始角度、结束角度。都是用弧度表示，(Math.PI/180)*degrees

anticlockwise : 布尔值，默认false。true为逆时针，false为顺时针

特别说明：向右为正，向下为为正

//绘制圆弧
var can = document.getElementById("myCanvas");
var ctx = can.getContext("2d");

ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
ctx.stroke();
 
ctx.beginPath();
ctx.arc(150, 50, 40, 0, -Math.PI / 2, true);
ctx.closePath();
ctx.stroke();
 
ctx.beginPath();
ctx.arc(50,