Как изменить толщину линии в HTML-холсте?

Question

У меня есть пример здесь

http://jsfiddle.net/8NzjH/

Я пытаюсь нарисовать толстую среднюю линию следующим образом:

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

Что я могу сделать, это сохранить контекст, изменить ширину линии, рисовать линии, а затем восстановить контекст. Однако толщины всех линий одинаковы. Что я делаю не так?

Answer 1

Вам нужно, чтобы начать новый путь с beginPath() для каждой строки, установите lineWidth, а затем stroke() линии для каждого.

Вот регулировка (скрипка ниже):

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

Если вы не используете beginPath() вы просто перерисовывать все линии снова, которая замедляет все в течение. Если все линии с одинаковой толщиной вы могли использовать один beginPath() в начале.

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

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

Там нет необходимости в save()/restore() контекст, если вы только настройки параметра или два, пока вы их отслеживаете (так как здесь мы устанавливаем lineWidth за каждый раз, что в этом случае более эффективно).

Необязательно просто сделать функцию, как:

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

Использование:

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

Исправленная скрипку:
http://jsfiddle.net/AbdiasSoftware/8NzjH/4/

Переставленные версия:
http://jsfiddle.net/AbdiasSoftware/8NzjH/5/

Answer 2

Это работает, как и ожидалось?

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

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