Как я могу изменить толщину линии в HTML canvas?

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

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

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

6
canvas javascript

2 ответов

вам нужно начать новый путь с 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() в самом начале.

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

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/

9

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

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

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