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

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

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

我想用它作为画布上的纹理，我正在画布上做一些绘制操作。我尝试了一些使用canvas.fillStyle的方法，但我看不出有什么效果。颜色很好用

---

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

您需要首先将其作为图像加载（确保处理异步方面），因此基本上要将图像设置为图案：

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

---

你是什么意思：我想把它用作纹理？我是说填充样式，所以它会重复。那么它和画图功能是同步的吗？设置模式之前是否需要等待某个事件？@BBaysinger您只需等待使用onload加载图像（异步），如示例所示（在上一个示例中使用设置模式替换drawImage）。之后，你可以参考它并以同步（线性）方式绘制。酷！非常感谢。我收到以下错误：core.es5.js:1020错误DomeException:未能对“CanvasGradient”执行“addColorStop”：提供的值（“[object CanvasPattern]”）无法解析为颜色。啊，我看到了。在其他人的代码中的某个地方。谢谢你的帮助。