HTML Canvas Lines Несколько цветов - PullRequest
Новая
       24

HTML Canvas Lines Несколько цветов

0 голосов
/ 10 октября 2018 

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 - Кажется, я не могу иметь линии с разными цветами.Потому что опять же, даже когда я применяю второй цвет, он идет вверху каждой строки ...

Вы можете мне помочь?

Спасибо.

1 Ответ

0 голосов
/ 10 октября 2018

Проблема в том, что вы начинаете путь вне цикла.Первая линия рисуется 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>
...