绘制弧形或者圆形，我们使用arc（）方法。

弧的制作属于路径，必须先beginPath（），弧或圆形必须进行描边或填充才能进行显示

canvas 绘制弧形或圆形 - 图1

注意

ctx.arc（）函数中表示角的单位是弧度，不是角度。

角度与弧度的JS表达式：弧度=（Math.PI/180）*角度。

1弧度 = 57°

·特殊的角度，例如：

180°=Math.PI弧度

360°=Math.PI*2弧度

<!DOCTYPEhtml> <htmllang=“en”> <head> <metacharset=“UTF-8”> <metahttp-equiv=“X-UA-Compatible”content=“IE=edge”> <metaname=“viewport”content=“width=device-width, initial-scale=1.0”> <title>Document</title> <style> * { margin: 0; padding: 0; } canvas { border: 1pxsolidred; } </style> </head> <body> <canvaswidth=“800”height=“600”id=“myCanvas”> 对不起，您的浏览器版本过低，请升级浏览器！ </canvas> <script> // 获取元素 varmyCanvas = document.getElementById(“myCanvas”); // 需要新建一个类似PS中的画布，获取 canvas 的渲染上下文获得 varctx = myCanvas.getContext(“2d”); // 后续所有的操作都是在上下文进行 // 绘制弧形的路径 ctx.beginPath(); // ctx.arc(300, 300, 100, 0, 1, true); ctx.arc(300, 300, 100, 0, Math.PI *2, true); ctx.closePath() ctx.lineWidth = 10; ctx.strokeStyle = “red”; ctx.stroke(); </script> </body> </html>