Как мне установить цвет точек (lineTo) - PullRequest
Новая
       12

Как мне установить цвет точек (lineTo)

0 голосов
/ 27 января 2020

Я хочу изменить цвет моей линии на определенном указателе после его рисования.
Сначала я установил strokeStyle на синий, а затем на зеленый.
Однако вся линия получает отображается зеленым цветом. Есть ли способ изменить цвет линии, пока она рисуется? 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();

ctx.strokeStyle = '#0000ff';  // set color to blue
ctx.lineWidth = 1; 
// HOWEVER IT DRAWS IN GREEN - Why ?
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70,100);
ctx.moveTo(50,50);
ctx.lineTo(50,51);


ctx.moveTo(53,50);
ctx.lineTo(53,51);
ctx.stroke();
// Above color should be Blue  
// Now set the color to green 
ctx.strokeStyle = '#00ff00';

ctx.moveTo(50,53);
ctx.lineTo(50,54);

ctx.moveTo(53,53);
ctx.lineTo(53,54);


ctx.stroke();
#myCanvas {
	height: 100%;
	width: 100%;
}
<p><strong>Note:</strong> Example 2  Two Lines and a dot.</p>

<canvas id="myCanvas"></canvas>

1 Ответ

0 голосов
/ 28 января 2020

Вы добавили ctx.beginPath(); слишком рано. Вам также нужно будет добавить его во второй раз после изменения цвета на зеленый.

См. Этот пример: 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.strokeStyle = '#0000ff';  // set color to blue
ctx.lineWidth = 1; 
//add beginPath() here:
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70,100);
ctx.moveTo(50,50);
ctx.lineTo(50,51);
ctx.moveTo(53,50);
ctx.lineTo(53,51);
ctx.stroke();

ctx.strokeStyle = '#00ff00';
//again, add beginPath() to make the new dots green:
ctx.beginPath();
ctx.moveTo(50,53);
ctx.lineTo(50,54);
ctx.moveTo(53,53);
ctx.lineTo(53,54);
ctx.stroke();
<p><strong>Note:</strong> Example 2  Two Lines and a dot.</p>
<canvas id="myCanvas"></div>
...