javascript - 如何更改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();

我要做的是保存上下文，更改线宽，绘制线，然后还原上下文。但是，所有线的粗细都相同。我究竟做错了什么？

最佳答案

您需要为每行用beginPath()开始一个新路径，设置lineWidth，然后为每行用stroke()。

这是一种调整(以下是 fiddle ):

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

更正的 fiddle :
http://jsfiddle.net/AbdiasSoftware/8NzjH/4/

重新排列的版本:
http://jsfiddle.net/AbdiasSoftware/8NzjH/5/

关于javascript - 如何更改HTML Canvas 中的线条粗细？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17185581/