Come posso variare lo spessore della linea in canvas HTML?

Question

Ho un esempio qui

http://jsfiddle.net/8NzjH/

Sto cercando di tracciare una linea di mezzo spessa come segue:

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

Quello che faccio è salvare il contesto, cambiare lo spessore della linea, disegnare la linea e quindi ripristinare il contesto. Tuttavia, lo spessore di tutte le linee è lo stesso. Che cosa sto facendo di sbagliato?

Answer 1

È necessario iniziare un nuovo percorso con beginPath() per ciascuna linea, impostare lineWidth e poi stroke() la linea per ciascuno.

Ecco un adeguamento (violino sotto):

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

Se non si utilizza beginPath() sarà sufficiente ridisegnare tutte le linee più volte che rallenta tutto giù nel corso. Se tutte le linee con lo stesso spessore avresti potuto usare un singolo beginPath() all'inizio.

È inoltre possibile riorganizzare il codice in modo che le linee con lo stesso spessore è raggruppate sotto un unico percorso, ecc Ad esempio:

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

Non v'è alcuna necessità di save()/restore() contesto se solo la regolazione di un parametro o due finché si tiene traccia di loro (come qui impostiamo lineWidth per ogni volta. Questo è più efficiente in questo caso).

Facoltativamente solo fare una funzione come:

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

Usage:

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

violino Corretto:
http://jsfiddle.net/AbdiasSoftware/8NzjH/4/

versione Risistemato:
http://jsfiddle.net/AbdiasSoftware/8NzjH/5/

Answer 2

Funziona come previsto?

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

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