HTML5学习第13篇——canvas之beginPath

最新推荐文章于 2024-08-14 05:19:50 发布

水晶果冻1125

最新推荐文章于 2024-08-14 05:19:50 发布

阅读量766

点赞数

CC 4.0 BY-SA版权

分类专栏： # HTML5 文章标签： canvas beginPath

本文链接：https://blog.youkuaiyun.com/m0_37617778/article/details/84898283

HTML5 专栏收录该内容

20 篇文章

订阅专栏

本文通过实例演示如何在HTML5 Canvas中正确绘制不同颜色的平行线，解析了颜色叠加及路径重叠的问题，并提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开始学习canvas动画，先来个简单的示例，了解一下canvas以及实际使用中的小问题。

1、目标

画两条平行的直线，第一条线的颜色是红色、第二条线的颜色是绿色

2、示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas</title>
	<style type="text/css">
		canvas{
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas width="600" height="400"></canvas>
	<script type="text/javascript">
		//获取画布
		var c = document.querySelector('canvas');
		//获取绘图对象
		var ctx = c.getContext("2d");

		//画一条直线 1
		//开始位置
		ctx.moveTo(50,50);
		//结束位置
		ctx.lineTo(300,50);
		//线的颜色
		ctx.strokeStyle = 'red';
		//设置线的宽度
		//ctx.lineWidth = 10;
		//绘制 画线
		ctx.stroke();

		//再画一条线 2
		//开始位置
		ctx.moveTo(50,100);
		//结束位置
		ctx.lineTo(300,100);
		//线的颜色
		ctx.strokeStyle = 'green';
		//设置线的宽度
		//ctx.lineWidth = 10;
		//绘制 画线
		ctx.stroke();
	</script>
</body>
</html>

显示效果如下：

存在的问题：第一条直线不是红色，而是红色和绿色叠加后的颜色。
原因：绘制时调用了两次stroke()方法，导致第一条线被画了两次。
解决方法：

只调用一次stroke方法，代码如下：

<script type="text/javascript">
		//获取画布
		var c = document.querySelector('canvas');
		//获取绘图对象
		var ctx = c.getContext("2d");

		//画一条直线 1
		//开始位置
		ctx.moveTo(50,50);
		//结束位置
		ctx.lineTo(300,50);
		//线的颜色
		ctx.strokeStyle = 'red';
		//设置线的宽度
		//ctx.lineWidth = 10;
		//绘制 画线
		//ctx.stroke();


		//再画一条线 2
		//开始位置
		ctx.moveTo(50,100);
		//结束位置
		ctx.lineTo(300,100);
		//线的颜色
		ctx.strokeStyle = 'green';
		//设置线的宽度
		//ctx.lineWidth = 10;
		//绘制 画线
		ctx.stroke();

	</script>

显示效果如下：

存在的问题：第一条直线的颜色也变成绿色。
原因：绘制之前，线的颜色被设置为绿色ctx.strokeStyle = 'green'，覆盖之前的红色设置。
解决方法：

在第一条直线绘制完成后，使用beginPath()方法重置路径再画第二条线

代码如下：

<script type="text/javascript">
		//获取画布
		var c = document.querySelector('canvas');
		//获取绘图对象
		var ctx = c.getContext("2d");

		//画一条直线 1
		//开始位置
		ctx.moveTo(50,50);
		//结束位置
		ctx.lineTo(300,50);
		//线的颜色
		ctx.strokeStyle = 'red';
		//设置线的宽度
		//ctx.lineWidth = 10;
		//绘制 画线
		ctx.stroke();

		//重置路径
		ctx.beginPath();

		//再画一条线 2
		//开始位置
		ctx.moveTo(50,100);
		//结束位置
		ctx.lineTo(300,100);
		//线的颜色
		ctx.strokeStyle = 'green';
		//设置线的宽度
		//ctx.lineWidth = 10;
		//绘制 画线
		ctx.stroke();
	</script>

显示效果如下：