Wie kann ich meine Linienstärke in HTML-Canvas variieren?

Question

Ich habe hier ein Beispiel

http://jsfiddle.net/8NzjH/

Ich versuche, eine dicke mittlere Linie zu zeichnen, wie folgt:

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(); 

Was ich tue, ist den Kontext speichern, um die Linienbreite ändern, ziehen die Zeile und dann den Kontext wiederherstellen. Die Dicken aller Linien sind jedoch gleich. Was mache ich falsch?

Answer 1

Sie müssen einen neuen Weg mit beginPath() für jede Zeile beginnen, setzen lineWidth und dann stroke() die Linie für jeden.

Hier ist eine Anpassung (Geige unten):

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(); 

Wenn Sie einfach alle Linien, die alles immer wieder neu gezeichnet werden nicht beginPath() verwenden nach unten über den Verlauf verlangsamt. Wenn alle Linien die gleiche Dicke haben, könnten Sie am Anfang eine einzelne beginPath() verwendet haben.

Sie auch den Code neu anordnen können, so dass die Linien mit gleichen Dicke zusammen zum Beispiel unter einem Pfad usw. gruppieren:

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(); 

Es besteht keine Notwendigkeit zu save()/restore() Kontext ist, wenn Sie nur einen Parameter eingestellt oder zwei, solange Sie sie verfolgen (wie hier setzen wir lineWidth für jedes Mal. Dies ist in diesem Fall effizienter).

Optional nur eine Funktion machen wie:

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(); 
} 

Verbrauch:

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'); 

Korrigierte Geige:
http://jsfiddle.net/AbdiasSoftware/8NzjH/4/

Rearranged Version:
http://jsfiddle.net/AbdiasSoftware/8NzjH/5/

Answer 2

Funktioniert es wie erwartet?

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

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