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

Question

如果我在 Canvas 上画一个矩形，用纯色填充它。是否可以用透明的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

我试过类似的方法，但没有用。

还有其他方法吗？我错过了什么吗？

Answer 1

您所拥有的一切都可以正常工作。确保您拥有真正透明的 PNG。

这是您的代码的一个工作示例:

http://jsfiddle.net/BDXc7/