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

Question

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