如何繪製調整大小的圖片而不是線？ （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，包裝技術作爲一個函數。