Jak zmienić grubość linii w kanwie HTML?

Question

mam Przykładem

http://jsfiddle.net/8NzjH/

Próbuję narysować grubą środkową linię następująco:

var context = canvas.getContext("2d"); 
context.strokeStyle = '#000000'; 
context.fillStyle = '#000000'; 

context.moveTo(10, 10); 
context.lineTo(50, 10); 

context.save(); 
context.lineWidth = 15; 
context.moveTo(10, 30); 
context.lineTo(50, 30); 
context.restore(); 

context.moveTo(10, 50); 
context.lineTo(50, 50); 

context.stroke(); 

Co mogę zrobić, to zapisać kontekst, zmienić szerokość linii, rysować linii, a następnie przywrócić kontekst. Jednak grubości wszystkich linii są takie same. Co ja robię źle?

Answer 1

Trzeba zacząć nową ścieżkę z beginPath() dla każdej linii, a następnie ustawić lineWidthstroke() linia dla każdego.

Oto korekta (skrzypce poniżej):

var context = canvas.getContext("2d"); 

context.strokeStyle = '#000000'; 

context.beginPath(); 
context.moveTo(10, 10); 
context.lineTo(50, 10); 
context.lineWidth = 2; 
context.stroke(); 

//context.save(); no need to do this 
context.beginPath(); 
context.lineWidth = 15; 
context.moveTo(10, 30); 
context.lineTo(50, 30); 
context.stroke(); 

context.beginPath(); 
context.moveTo(10, 50); 
context.lineTo(50, 50); 
context.lineWidth = 2; 
context.stroke(); 

Jeśli nie będziesz używać beginPath() prostu przerysować wszystkie linie kółko który spowalnia wszystko w dół w ciągu. Jeśli wszystkie linie mają tę samą grubość, możesz użyć pojedynczego beginPath() na początku.

Można również zmienić kod tak, że linie z tej samej grubości są zgrupowane razem pod jednym torze itd Na przykład:

context.beginPath(); //begin here 
context.lineWidth = 2; //common width for the next two lines 

context.moveTo(10, 10); 
context.lineTo(50, 10); 

context.moveTo(10, 50); 
context.lineTo(50, 50); 

context.stroke(); //stroke here to draw them 

context.beginPath(); //start new path for new thickness 
context.lineWidth = 15; 

context.moveTo(10, 30); 
context.lineTo(50, 30); 

context.stroke(); 

Nie ma potrzeby, aby save()/restore() kontekście, jeśli tylko regulacji parametru lub dwa tak długo, jak śledzisz je (tak jak tutaj ustawiamy lineWidth za każdym razem, co jest w tym przypadku bardziej efektywne).

Ewentualnie po prostu zrobić funkcje jak:

function drawLine(ctx, x1, y1, x2, y2, width, color) { 

    if (typeof width === 'number') ctx.lineWidth = width; 
    if (typeof color === 'string') ctx.strokeStyle = color; 

    ctx.beginPath(); 
    ctx.moveTo(x1, y1); 
    ctx.lineTo(x2, y2); 
    ctx.stroke(); 
} 

Zastosowanie:

drawLine(context, 0, 0, 100, 100); //width and color is optional 
drawLine(context, 0, 0, 100, 100, 10); 
drawLine(context, 0, 0, 100, 100, 10, '#f00'); 

Poprawione skrzypce:
http://jsfiddle.net/AbdiasSoftware/8NzjH/4/

wersja uporządkowane:
http://jsfiddle.net/AbdiasSoftware/8NzjH/5/

Answer 2

Czy działa tak, jak się spodziewano?

http://jsfiddle.net/8NzjH/1/

context.lineWidth = 15; 
context.stroke();