如何将填充样式(纹理)设置为画布中的现有数据 URI

Question

我有一个现有的PNG数据URI，如下所示：

let dataURI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAD+qAB849H0AAAAAXRSTlMAQObYZgAAAAxJREFUCNdjSEsgiACnWAlJEDYe/gAAAABJRU5ErkJggg==";

我想将其用作画布中的纹理，我正在对其进行一些绘制操作。我已经用canvas.fillStyle尝试了一些事情，但我没有看到它有效。颜色工作正常。

在绘制操作中使用 dataURI 作为纹理的方法是什么？

Answer 1

您需要先将其加载为图像(确保处理异步方面(，因此基本上将图像设置为模式：

var img = new Image;
img.onload = imageIsReady;
img.src = "data: ....."; // full uri here
function imageIsReady() {
var pattern = ctx.createPattern(img, "repeat");
ctx.fillStyle = pattern;
// fill, etc.
}