HTML5绘图基础_10_绘制多个弧线_填充

最新推荐文章于 2021-07-03 09:43:59 发布

一起学习前端吧

最新推荐文章于 2021-07-03 09:43:59 发布

阅读量1k

点赞数

分类专栏： HTML5绘图文章标签： HTML5 canvas 弧线绘制

本文链接：https://blog.csdn.net/sweetsoft/article/details/50551136

版权

HTML5绘图专栏收录该内容

10 篇文章 0 订阅

订阅专栏

类似于直线绘制中的，绘制多个图形一样，如果需要绘制多个弧线，应该使用beginPath()方法来开始一个新的路径，但如果每次都调用closePath()则会使弧线变成封闭的图形，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				var canvas = document.querySelector("#c1");
				canvas.width = 900;
				canvas.height = 500;
				var context = canvas.getContext("2d");
				context.strokeStyle = "cornflowerblue";
				context.lineWidth = 3;
				for (var i = 0; i < 10; i++) {
					context.beginPath();
					context.arc(20 + i * 90 ,200,40,0,(i+1)*36 /180*Math.PI);
					context.closePath();
					context.stroke();
				}
			};
		</script>
	</head>
	<body>
		<canvas id="c1" style="border:1px solid gray;"></canvas>
	</body>
</html>

效果如下：

我们只需要将代码中的context.closePath();去掉即可，如果调用closePath()，会将绘制点和起始点自动相连，所以会变成封闭区域。

去掉后浏览效果如下：

如果我们再添加如下代码：

				context.fillStyle = "cornflowerblue";
				for (var i = 0; i < 10; i++) {
					context.beginPath();
					context.arc(20 + i * 90 ,300,40,0,(i+1)*36 /180*Math.PI);
					context.closePath();
					context.fill();
				}
				for (var i = 0; i < 10; i++) {
					context.beginPath();
					context.arc(20 + i * 90 ,400,40,0,(i+1)*36 /180*Math.PI);
					context.fill();
				}

执行效果相同，context.closePath()将不起作用。

如下：