如何填充样式（纹理）设置为现有数据URI在画布

我有一个现有的PNG数据URI，如：如何填充样式（纹理）设置为现有数据URI在画布

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

我想用这作为我的画布纹理，我这样做一些绘制操作。我用canvas.fillStyle尝试了几件事，但我没有看到这个工作。颜色工作正常。

在绘图操作中将dataURI用作纹理的方式是什么？

来源

2017-08-22 BBaysinger

你的意思是：我想使用它作为一个质地？ –

我的意思是填充样式，所以它重复。 – BBaysinger

你需要将其加载为图像的第一（一定要处理异步方面），所以基本上可以将图像设置为模式：

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. 
}

来源

2017-08-22 21:49:48 K3N

那么它与那里的绘图函数是同步的吗？在设置模式之前是否需要等待某个事件？ – BBaysinger

@BBaysinger你只需要等待图像加载（异步）使用onload如示例中所示（只需替换drawImage与设置模式在最后一个示例中）。之后，您可以参考它并以同步（线性）方式绘制。 – K3N

@BBaysinger更新的答案更清晰。 – K3N

如何填充样式（纹理）设置为现有数据URI在画布

回答

相关问题