Javascript-画布-将透明png覆盖在先前填充的颜色上

如果我在画布上画一个矩形，用纯色填充它。是否可以用一个透明的png再次填充它，这样我仍然可以看到背景中的原始颜色

比如，伪代码-

  ctx.beginPath();
  ctx.lineTo( //draw a rectangle )
  ctx.fillStyle = "#FF0000" 
  ctx.fill();
  var imageObj = new Image();
  function drawPattern() {
       var pattern = ctx.createPattern(imageObj, "repeat");
       ctx.fillStyle = pattern;
       ctx.fill();
  }
  imageObj.onload = drawPattern;
  imageObj.src = "images/dot.png"; //transparent png

我也尝试过类似的方法，但它不起作用

---

还有别的办法吗？我遗漏了什么吗？

你的东西会很好用的。确保你有一个真正透明的PNG

下面是代码的一个工作示例：

---

它在Chrome上对我有效。你确定它是透明的吗？嗯，我会再检查一次。非常感谢汉克斯给我举了个例子，帮我把事情弄清楚了。是png。在不重复模式的情况下将头部悬空并翻译上下文，显示透明度问题。