arc() 方法创建不同圆形

最新推荐文章于 2024-01-12 15:26:59 发布

礼礼。

最新推荐文章于 2024-01-12 15:26:59 发布

阅读量598

点赞数

分类专栏： JS曲线文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45736311/article/details/113422424

版权

JS曲线专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.创建一个圆形
arc() 方法创建弧/曲线（用于创建圆或部分圆）。
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
(xy中心点，r 半径，开始角，结束角，顺/逆时针 False = 顺时针，true = 逆时针)
在这里插入图片描述
如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为2*Math.PI。

例如：
在这里插入图片描述

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.arc(75, 75, 55, 0, 1.5*Math.PI,);
// (xy中心点，r 半径，开始角，结束角，顺/逆时针 False = 顺时针，true = 逆时针)
ctx.stroke();

</script> 

</body>
</html>