关于 html canvas 画圆弧的小技巧

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

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

<!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>

 效果如图：

 

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

 

posted @ 2017-01-18 14:28  alfrag  阅读(1209)  评论(0)  编辑  收藏  举报