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

路径是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

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值