如何绘制重新调整大小的图片而不是行？ （html5画布）

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通道）会怎么样。

怎么做这样的事情？

Answer 1

使用上下文的drawImage()方法，但首先使用translate, rotate, and scale上下文。图像将根据您的喜好旋转成细长的细线。

编辑：我已经放了一个实时的example of this technique online，将该技术作为一个功能包装起来。