javascript - 如何绘制调整大小的图片而不是线条？ (html5 Canvas )

Question

所以我们可以有这样的函数来画一条线

function drawLine(g, n, x1, y1, x2, y2){
    g.beginPath();
    g.lineWidth = n > 0 ? n : 1;
    g.strokeStyle = "rgb(0, 128, 32)";
    g.moveTo(x1, y1);
    g.lineTo(x2, y2);
    g.stroke();
}

但是如果我们想绘制图像而不是线条(根据线条大小调整大小，使用 alpha channel )怎么办？

如何做这样的事情？

Answer 1

使用context的drawImage()方法，但是先translate, rotate, and scale上下文。图像将以您喜欢的方式旋转的细长线出现。

编辑:我放了一个直播 example of this technique online ，将技术包装为一个函数。