Javascript - Canvas -在先前填充的颜色上叠加透明的png

Javascript - Canvas - overlaying a transparent png on a previousley filled color

本文关键字：叠加 透明 png 颜色 在先前 填充 Javascript Canvas      更新时间：2023-09-26

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

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

http://jsfiddle.net/BDXc7/

相关文章：