关于 html canvas 画圆弧的小技巧

最新推荐文章于 2022-08-23 19:37:26 发布

weixin_34321753

最新推荐文章于 2022-08-23 19:37:26 发布

阅读量135

点赞数

原文链接：http://www.cnblogs.com/alfrag/p/6296625.html

版权

首先，这个代码不是我写的，但是在网上找的资料都太麻烦，需要各种画线，其实完全没有必要，两局核心代码就搞定了，代码来源于网上的转盘游戏的源码：

提取关键的两句代码，整理一下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-2.1.4.js"></script>
	</head>
	<body style="width: 100%;height: 100%;margin: 0;padding: 0;">
		<div style="width: 600px;height: 600px;margin: 0 auto;">
			<canvas width="500px" height="500px" id="wheelCanvas"></canvas>
		</div>
		<script>
			var canvas = document.getElementById("wheelCanvas");
			
			var ctx = canvas.getContext("2d");
			
			ctx.beginPath();
			ctx.fillStyle="#FFBE04";
			
			ctx.strokeStyle="red";
			
			ctx.arc(canvas.width*0.5,canvas.height*0.5,200,0,Math.PI*2/16,false);
			ctx.arc(canvas.width*0.5,canvas.height*0.5,0,Math.PI*2/16,0,true);
			
			ctx.closePath();
		
			ctx.stroke();
			ctx.fill();
			
		</script>
	</body>
</html>

效果如图：

当然，想要修改角度也很简单

转载于:https://www.cnblogs.com/alfrag/p/6296625.html

weixin_34321753

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于 html canvas 画圆弧的小技巧

首先，这个代码不是我写的，但是在网上找的资料都太麻烦，需要各种画线，其实完全没有必要，两局核心代码就搞定了，代码来源于网上的转盘游戏的源码：提取关键的两句代码，整理一下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title&...
复制链接

扫一扫