【Html5每日练习】canvas beginPath()的理解

最新推荐文章于 2024-07-02 22:34:09 发布

boia

最新推荐文章于 2024-07-02 22:34:09 发布

阅读量1.2w

点赞数 2

分类专栏： html5 canvas 文章标签： html5 html

本文链接：https://blog.csdn.net/boiaprogramfan0420/article/details/7451608

版权

html5 canvas 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

路径是canvas里很重要的一个概念，刚开始学canvas的人对路径理解不是很深，他们在用canvas的时候会乱用beginPath(),今天做了一个小demo来说明一下路径

看代码:

<html lang="en-US">
<canvas id=myCanvas width=500px height=500px></canvas>

<script>
	var myCanvas = document.getElementById("myCanvas");
	var context = myCanvas.getContext("2d");
	
	context.fillStyle = "#e4e4e4";
	context.fillRect(0,0,500,500);

	context.beginPath();
	
	context.moveTo(100,100);
	context.lineTo(200,100);
	context.strokeStyle = "red";
	context.stroke();

	context.beginPath();
	context.moveTo(100,200);
	context.lineTo(200,200);
	context.strokeStyle = "blue";
	context.stroke();
</script>
</html>

如果不对这段代码做改动的话，显示的一条红线和蓝线，大家会想，这有什么好说的呢，肯定是这样啊。

接下来我们把第二个的context.stroke()注释起来，你会发现最后的结果只是一条蓝线，因为第一个路径没有stroke()就重新开辟了一个路径，使得只能画了第二个路径的直线，大家是不是发现越来越神奇了呢？

紧接着我把不注释context.stroke()，而把context.beginPath()注释起来，你发现什么了？很奇妙，你发现了一条紫线和蓝线，为什么呢？原来是因为没有开辟新的路径，所以第二个stroke()又重新画了第一条直线，并且用了蓝色，而第一个stroke()已经用红色画了第一条直线了，蓝色和红色的结合就变成了紫色。

你想想，如果把beginPath()和stroke()都注释起来会怎么样呢？两条蓝色的直线，you are good

boia

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
9
评论
【Html5每日练习】canvas beginPath()的理解

路径是canvas里很重要的一个概念，刚开始学canvas的人对路径理解不是很深，他们在用canvas的时候会乱用beginPath(),今天做了一个小demo来说明一下路径看代码: var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); con
复制链接

扫一扫

专栏目录