如何绘制调整大小的图片而不是线条？ （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，将这项技术封装为一个函数。