HTML5 canvas 绘制圆形

最新推荐文章于 2024-08-16 18:48:55 发布

陈小妹

最新推荐文章于 2024-08-16 18:48:55 发布

阅读量2.4k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/u011102207/article/details/47341049

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

canvas绘制圆形的思路：

1、创建路径 XXX.beginpath();

2、创建圆形的路径；

3、关闭路径；XXX.closepath(); 路径不关闭也能绘制出图形

4、设定绘制样式。

创建圆形路径时需要用到对象的arc方法，方法定义如：XXX.arc(x,y,radius,startAngle,endAngle,counterclockwise)

x为圆形起点的横坐标，y为圆形起点的纵坐标，(x,y)为圆心，radius为圆形半径，startAngle为开始角度，endAngle为结束角度，counterclockwise是否按逆时针方向进行绘制。

,值为false表示按顺时针方向计算。

<!DOCTYPE html>
<meta charset="utf-8">
<head>
</head>

<body>
<canvas id="yuanxing" width="1000" height="1000"></canvas>
<script type=text/javascript>
var canvas=document.getElementById("yuanxing");
var context=canvas.getContext("2d");
context.fillStyle="#FF0000";
context.beginPath();
context.arc(200,200,200,0,Math.PI*2,true); //Math.PI*2是JS计算方法，是圆
context.closePath();
context.fill();
</script>
</body>
</html>