HTML5 绘制图形canvas 使用路径（一）

最新推荐文章于 2024-06-12 19:26:52 发布

GG-Boy改

最新推荐文章于 2024-06-12 19:26:52 发布

阅读量4.8k

点赞数

分类专栏： HTML5 文章标签： canvas html5 图形绘制路径

本文链接：https://blog.csdn.net/u013064030/article/details/51762598

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上一篇我们学习了html5中关于canvas的基本使用方法，绘制了矩形。但矩形只是基本，我们还可以绘制很多其他的图形，比如圆，比如多边形。这里我们就要了解canvas关于路径的使用。这次我们学习如何使用canvas画圆。

1.html代码的编写

这里我们还是使用与上次一样的代码，只是需要更改不同的js文件，让页面加载时调用相应的js脚本文件进行图形绘制。

<head>
    <title>canvas.html</title>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body οnlοad="draw('canvas')" align="center">
  	<canvas id="canvas" width="400" height="400"></canvas>
  </body>

2.画圆

2.1.打开路径绘制

ctx.beginPath();//开始绘图

每次进行路径绘制时，都要先调用context对象的beginPath()方法。第一次进行路径绘制时，系统会默认调用一个beginPath()方法。

2.2.绘制圆形路径

ctx.arc(100,100,100,0,Math.PI/2,false);

我们调用context.arc(x, y, radius, starAngle,endAngle, anticlockwise)方法，其中的参数分别为：

         x:圆心的x坐标
         y:圆心的y坐标
   radius:圆的半径
         straAngle:开始角度（弧度）
         endAngle:结束角度（弧度）
         anticlockwise:是否逆时针（true）为逆时针，(false)为顺时针

通过更改这六个参数，我们可以绘制不同的圆形路径，但需要注意的是绘制出来的只是圆弧，所以我们传入的开始角度和结束角度都要是弧度数，而不能是角度数。通过设置不同的开始角度和结束角度，我们不仅能画圆，还可以绘制大小不同的圆弧。

2.3.关闭路径绘制

ctx.closePath();//关闭绘图

路径创建完成时，调用context对象的closePath()方法关闭路径绘制。但要注意的是此时只是有了图形轮廓，但并没有真正的绘制任何的图形。

2.4.设置绘制样式，进行图形绘制

	ctx.fillStyle="rgb(255,0,0)";
	ctx.strokeStyle="rgb(0,0,255)";
	ctx.fill();
	ctx.stroke();

关于图形样式的设置，我们也可以放在beginPath()方法之前进行。只要图形还没有真正的绘制，我们都可以对他的样式进行更改。

在网页中输入地址，可以看到我们绘制的基本图形。

具体代码

function draw(id) {
	var canvas = document.getElementById(id);
	if(canvas==null)
		return false;
	var ctx = canvas.getContext("2d");
	ctx.fillStyle="#eeeeff";
	ctx.fillRect(0,0,400,400);
	
	ctx.beginPath();//开始绘图
	ctx.arc(100,100,100,0,Math.PI/2,false);
	ctx.closePath();//关闭绘图 
	ctx.fillStyle="rgb(255,0,0)";
	ctx.strokeStyle="rgb(0,0,255)";
	ctx.fill();
	ctx.stroke();
}

效果图

3.关于beginPath()和closePath()的讨论

其实在我的理解中，这两个方法就类似于我们打游戏，beginPath()代表着开始游戏，就是游戏的入口，然后等我们打通了这一关，杀光了所有的怪（创建路径），我们会进入下一关，那么就会调用closePath()方法将这一关所有数据恢复为初始状态（路径回到起点），所有的怪也都恢复，当下一个人来的时候还要重新过这一关。

基于这个理解，我们就不难理解以下概念了：

**每个游戏开始的时候一定有个默认的入口，所以第一个beginPath()会默认存在，即使你不写也没有关系。

**如果你下一次创建路径时忘记了调用beginPath()，就意味着没有给他开始游戏的入口，所以他就会找到上一个人开始的入口，就是上次调用beginPath()的位置。那么这里就会成为他的起点，路径也会从这里开始绘制。简单来说就是将上一次绘制的路径再绘制一遍才继续绘制新创建的路径。

**如果你创建路径后忘了调用closePath()方法，就相当于你打通关后忘了恢复初始状态。如果你使用的是stroke绘制边框，你会看到他只画了个弧形而并没有封口（不信试试）。如果你下一次绘制时同时也忘了调用beginPath()，那么就意味着下一个人根本就不用打这一关了（已经被通关了好么），所以他的起点就是上一个人的终点，就是直接打下一关，绘制新创建的路径就可以了。需要注意的是如果第二次调用了closePath()，此时恢复到初始状态就是第一个人的初始状态，就是第一个人入口的地方（因为第二个人根本没有入口好么），简单来说就是如何没有closePath(),下一次开始从上一次的结尾位置开始绘制,但是再连接还是找上一次的beginPath的位置。

**每次调用fill()的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分。而每次调用stroke()的时候如果没有指定closePath(),开始点到结束点不会闭合。

**通过灵活的使用beginPath()和closePath()方法可以绘制出很多很有趣，很新奇的图形，但如果你还不太搞得清楚地话，记得每一次都在绘制路径前后调用beginPath()和closePath()方法就好。

具体的可以结合下面这幅图自己思考，细细品味一下其中的区别O(∩_∩)O~

4.个人结语

关于beginPath()和closePath()，真的感觉是非常的神奇的东西，借助他可以实现很不同的效果。同样的代码就因为一行代码而产生了很大的不同。上个例子我们体会一下。

js代码

function draw(id) {
	var canvas = document.getElementById(id);
	if(canvas==null)
		return false;
	var ctx = canvas.getContext("2d");
	ctx.fillStyle="#eeeeff";
	ctx.fillRect(0,0,400,400);

	for (var i = 0; i < 10; i++) {
		ctx.beginPath();
		ctx.arc(i*25,i*25,i*10,0,2*Math.PI,true);
		ctx.closePath();
		ctx.fillStyle="rgba(255,0,0,0.25)";
		ctx.fill();
	}
}

效果图

注释beginPath()和closePath()后运行效果

具体差异产生的原因我就不再赘述了，不过如果要使用灵活的使用 beginPath()和closePathh()一定要注意计算好路径在哪里开始，在哪里关闭。

继续学习，持续深入。道路正确，方法正确，只要努力，一定会有收获的！！！

GG-Boy改

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5 绘制图形canvas 使用路径（一）

上一篇我们学习了html5中关于canvas的基本使用方法，绘制了矩形。但矩形只是基本，我们还可以绘制很多其他的图形，比如圆，比如多边形。这里我们就要了解canvas关于路径的使用。这次我们学习如何使用canvas画圆。 1.html代码的编写这里我们还是使用与上次一样的代码，只是需要更改不同的js文件，让页面加载时调用相应的js脚本文件进行图形绘制。
复制链接

扫一扫