Javascript / HTML5使用圖像填充畫布

Question

我正試圖讓圖像填滿我的畫布。 這是我正在嘗試的代碼：

var blueprint_background = new Image();
blueprint_background.src = 'images/blueprint_background.png'; 
var pattern = context.createPattern(blueprint_background, "repeat");

context.fillStyle = pattern;
context.fill();

問題是什么都沒有出現。 我能夠做基本的context.fillRect（..）示例，但這給了我麻煩。

謝謝。

Answer 1

您必須等到圖像加載，使用圖像的onload屬性來知道它何時加載。

var blueprint_background = new Image();
blueprint_background.src = 'images/blueprint_background.png'; 
blueprint_background.onload = function(){
    var pattern = context.createPattern(this, "repeat");
    context.fillStyle = pattern;
    context.fill();
};