javascript - 渐进线宽

Question

我正在学习如何使用 Canvas ，我想制作一个绘画应用程序。我可以很容易地画出线条和形状，但我不明白如何用同一条线将一条线的宽度从指定大小更改为另一个。

我想做这样的事情:

从点 (0, 1) 到点 (10, 10) 画一条线，大小从 10 到 5

这可能吗？

Answer 1

试试这个，思路是画几条线

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

function drawline(xo,yo,xf,yf,wo,wf, parts){

    var stepX = (xf-xo)/parts;
    var stepY = (yf-yo)/parts;
    var stepW = (wf-wo)/parts;
    for(var i=1; i<=parts; ++i){
      ctx.beginPath();
      ctx.lineWidth = wo + stepW*i;
      ctx.moveTo(xo+stepX*(i-1), yo+stepY*(i-1));
      ctx.lineTo(xo+stepX*i, yo+stepY*i);
      ctx.stroke();
    }
}

drawline(10,10,150,150,1,10, 100);
drawline(10,10,150,300,1,10, 100);

<canvas id="canvas1" width="500" height="500">
</canvas>

或者，更好的解决方案，使用梯形(没有通用解决方案显示)

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

function drawline(xo,yo,xf,yf,wo,wf){
    //if xf == xo vertical line, failure ;)
    var m = (yf-yo)/(xf-xo);
    //if m==0, horizontal line, failure
    var mp = -1 / m;
    var angle = Math.atan(mp);
    var dy1 = Math.sin(angle) * wo/2;
    var dx1 = Math.cos(angle) * wo/2;
    var dy2 = Math.sin(angle) * wf/2;
    var dx2 = Math.cos(angle) * wf/2;

    //depending on the positions of xo,yo,xf and yf change signs
    //this isn't a general solution
    //solution for xo<xf and yo<yf
    var x1 = xo + dx1;
    var y1 = yo + dy1;
    var x2 = xo - dx1;
    var y2 = yo - dy1;
    var x3 = xf - dx2;
    var y3 = yf - dy2;
    var x4 = xf + dx2;
    var y4 = yf + dy2;

    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineTo(x3, y3);
    ctx.lineTo(x4, y4);
    ctx.fill();
}

drawline(10,10,150,150,1,10);
drawline(10,10,150,300,1,10);

<canvas id="canvas1" width="500" height="500">
</canvas>