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();
};