1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

html5扇形写法canvas

扇形,就是一个不完整的圆,提到圆,我们就能马上想到用arc方法来画。的确,arc可以画出扇形的弧线,但光是靠arc我们是不能画出扇形的,下面列举画扇形详解,直接上代码:

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      		<style type="text/css">      			canvas{      				background: #1E90FF;      			}      		</style>      	</head>      	<body>      		<canvas id="canvas" width="800" height="500"></canvas>      		<script type="text/javascript">      			var canvas = document.getElementById("canvas");      			var cv = canvas.getContext('2d');      //			开启路径      			cv.beginPath();      //			定义笔触开始的地方      			cv.moveTo(300,220);      //			定义扇形的路径  半径200   60度开始,120度结束,这个扇形60度      			cv.arc(300,220,200,60*Math.PI/180,120*Math.PI/180)      //	设置圆形		圆的坐标距离左边400,上面300,半径100  角度,弧度 0*math.PI/180,360*Math.PI/180      //			cv.arc(400,300,100,0*Math.PI/180,360*Math.PI/180);      //				指定填充颜色      				cv.fillStyle = 'yellow';      //				图开填充      				cv.fill();      //			开启路径      			cv.beginPath();      //			定义笔触开始的地方      			cv.moveTo(300,220);      //			定义扇形的路径  半径200   120度开始,200度结束,这个扇形80度      			cv.arc(300,220,200,120*Math.PI/180,200*Math.PI/180)      //				指定填充颜色      				cv.fillStyle = 'palegreen';      //				图开填充      				cv.fill();      //			开启路径      			cv.beginPath();      //			定义笔触开始的地方      			cv.moveTo(300,220);      //			定义扇形的路径  半径200   200度开始,290度结束,这个扇形90度      			cv.arc(300,220,200,200*Math.PI/180,290*Math.PI/180)      //				指定填充颜色      				cv.fillStyle = 'blue';      //				图开填充      				cv.fill();      //			开启路径      			cv.beginPath();      //			定义笔触开始的地方      			cv.moveTo(300,220);      //			定义扇形的路径  半径200   290度开始,420度结束,这个扇形150度      			cv.arc(300,220,200,290*Math.PI/180,420*Math.PI/180)      //				指定填充颜色      				cv.fillStyle = 'pink';      //				图开填充      				cv.fill();      		</script>      	</body>      </html>

上面代码图片效果:

注意:上面代码中已经有详细注释,但我还要说几句。函数中画路径的时候,就先画弧线,再从终点连到圆心,再从圆心连到起点。为什么?因为这个顺序路径才不会断——arc是从起点开始画起的,最后路径又回到起点,才合情合理。在测试函数的时候,我想当然的先画了弧线,再从起点连圆心连终点,结果导致路径断了。大家一定要注意。

原文链接:https://www.qiquanji.com/post/7648.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: