canvas弧线与圆

最新推荐文章于 2023-12-03 03:00:00 发布

laxexue

最新推荐文章于 2023-12-03 03:00:00 发布

阅读量275

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/laxexue/article/details/84030005

版权

canvas 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

绘制一条弧线
context.arc(
   centerx,centery,radius,
   startingAngle,endingAngle,
   anticlockwise = false//顺时针默认 true逆时针
)


<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
		
	</canvas>
	
</body>
</html>

<script type="text/javascript"> 
		/*context.arc(
			centerx,centery,radius,
			startingAngle,endingAngle,
			anticlockwise = false//顺时针默认 true逆时针
		)*/

		window.onload = function(){
			var canvas = document.getElementById('canvas');

			canvas.width = 1024;
			canvas.height = 768;

			var context = canvas.getContext('2d');
			context.lineWidth = 5;
			context.strokeStyle = '#005588';
			
			for (var i = 0; i < 10; i++) {
				context.beginPath();
				context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
				context.closePath();
				context.stroke();
			}
			for (var i = 0; i < 10; i++) {
				context.beginPath();
				context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10);
				context.stroke();
			}
		}

	</script>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

laxexue

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas弧线与圆

绘制一条弧线context.arc( centerx,centery,radius, startingAngle,endingAngle, anticlockwise = false//顺时针默认 true逆时针)&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/titl...
复制链接

扫一扫