Укладка на холсте

Question

В настоящее время я работаю над прототипом, который отображает некоторые данные как смутный метр: Начальная точка серого дуги начала до конца, синяя дуга показывает текущее значение. Я добавляю линейный ход в начале и конце серой дуги заднего плана.

Для рисования этого я использую HTML холст.

var ctx ; 

var currVague=document.getElementById("currVague"); 

ctx = currVague.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(122,122,99,0.81*Math.PI,0.19*Math.PI); 
ctx.strokeStyle="#555"; 
ctx.lineWidth=16; 
ctx.stroke(); 

ctx.beginPath(); 
ctx.arc(122,122,99,0.81*Math.PI,0.12*Math.PI); 
ctx.strokeStyle="#3872C1"; 
ctx.lineWidth=16; 
ctx.stroke(); 

ctx.strokeStyle="#949494"; 
ctx.moveTo(25,175); 
ctx.lineTo(50,175); 
ctx.lineWidth=5; 
ctx.stroke(); 

Это первый раз, когда я пытаюсь использовать холст, и не знаю, почему серая кривая отображается на переднем плане.

Answer 1

Просто добавьте beginPath() в последнем разделе, где вы рисуете линию:

ctx.strokeStyle="#949494"; 
ctx.beginPath();  /// here needs to be a beginPath() 
ctx.moveTo(25,175); 
ctx.lineTo(50,175); 
ctx.lineWidth=5; 
ctx.stroke(); 

Если вы не то, что происходит в том, что предыдущая дуга еще часть пути, и когда вы его погладить, что дуги, и ваша новая добавленная линия будет поглажена. Чтобы «разбить» путь, так сказать, просто вызовите beginPath(), и только то, что добавлено после этого, будет поглажено (или заполнено) в следующий раз.