logo标签列表

JavaScript/HTML5使用图像填充画布

javascripthtmlcanvas
9

我正在尝试让一张图片填充整个画布。这是我尝试的代码：

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(..)示例，但这个示例让我遇到了麻烦。
谢谢。
2个回答
13

你需要等待图片加载完毕，使用图片的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();
};
我看到了不匹配的括号？我对JavaScript不太熟悉。编辑-尝试删除')'以修复语法错误，但图像仍未加载。 - JDS
嗨，我通过在context.fill()之前添加以下代码进行了修复：context.rect(x,y,width,height); 然后它完全按照我的预期工作了。 - JDS
0

注意：如果有人想在Worker中从图像创建模式，请注意。

在Worker类内部，Image未定义！

ReferenceError: Image is not defined

在这种情况下，我们可以采取以下措施：
const result = await fetch('./image.png');
const blob = await result.blob();
const image = await createImageBitmap(blob);
const pattern = canvasContext2D.createPattern(image, 'repeat');

然后简单地填充OffscreenCanvasContext2D：

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

参考资料:

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接