Question

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 10);
	for (var i=1; i<=6; i++) {
  		ctx.lineTo(110*i, 300*1);
  		ctx.strokeStyle = 'rgba(70, 144, 249, 0.1)';
  		ctx.stroke();
        
  		ctx.moveTo(10, 10);
        
	}

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>

嗨，我有两个问题。

1-当我的线条不透明时，线条似乎总是被复制到它们的顶部，从而使第一行具有多个不透明度，而最后只有我设置的一层不透明度。

2-我似乎无法使用不同颜色的线条。因为同样，即使当我应用第二种颜色时，它也位于每一行的顶部...

你能帮我吗？

谢谢。

Answer 1

问题是您从循环外部开始路径。第一行绘制6次，最后一行仅绘制一次。在循环内移动beginPath和moveTo可解决您的问题。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

for (var i = 1; i <= 6; i++) {
  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(110 * i, 300 * 1);
  ctx.strokeStyle = "rgba(70, 144, 249, 0.1)";
  ctx.stroke();

  ctx.moveTo(10, 10);
}

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

HTML画布行多种颜色

1 个答案: