Javascript / HTML5使用图像填充画布 [英] Javascript/HTML5 using image to fill canvas

问题描述

我正试图让图片填满我的画布。这是我正在尝试的代码：

I'm trying to get an image to fill up my canvas. Here is the code I'm trying:

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（..）示例，但这给了我麻烦。

The issue is that nothing shows up. I was able to do the the basic context.fillRect(..) example, but this is giving me troubles.

谢谢。

推荐答案

你必须等到图像加载，使用image的onload属性来知道它何时加载。

You have to wait until the image loads, use the image's onload property to know when it loads.

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

这篇关于Javascript / HTML5使用图像填充画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！