【Html5 每日练习】canvas绘制弧形

最新推荐文章于 2022-09-21 00:25:50 发布

boia

最新推荐文章于 2022-09-21 00:25:50 发布

阅读量5.1k

点赞数

分类专栏： html5 canvas 文章标签： html5 html

本文链接：https://blog.csdn.net/boiaprogramfan0420/article/details/7455351

版权

html5 canvas 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<html lang="en-US">
<canvas id=myCanvas width=500px height=500px></canvas>

<script>
	var myCanvas = document.getElementById("myCanvas");
	var context = myCanvas.getContext("2d");
	var wise = true;

	context.lineWidth = 3;
	context.strokeStyle = "blue";
	context.fillStyle = "red";
	for(var i=1;i<5;i++)
	{
		for(var j=1;j<4;j++)
		{
			context.beginPath();			
			context.arc(j*100,i*100,40,0,j*2/3*Math.PI,wise);
			if(1 == i||3 == i)
				context.stroke();
			else
				context.fill();
			wise = !wise;
		}
	}
</script>
</html>

利用arc(x,y,r,startAngle,endAngle,anticlockwise)，画弧线，(x,y)表示圆心的坐标，(startAngle,endAngle)表示起末角度，anticlockwise的选择为哪个方向画圆。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

boia

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Html5 每日练习】canvas绘制弧形

var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); var wise = true; context.lineWidth = 3; context.strokeStyle = "blue"; context.fillStyle = "red"; for
复制链接

扫一扫