Question

我想要实现以下目标：

将bg图像绘制到画布上（一次或需要重复）
图片不应该在开头可见
当我在画布上“绘制”形状时，bg图像应该在绘制形状的地方可见

将要显示的图像部分应“画”（就像用刷子一样），所以我想使用笔画。

我尝试了什么： - 不要清除画布 - 使用globalCompositeOperation ='destination-in'绘制画布到画布这是有效的，矩形显示图像，但我需要笔画

如果我使用笔画，则会使用'destination-in'忽略它们，而我会使用普通的globalCompositeOperation看到它们。

是否打算忽略笔画？有没有像某种方式将笔划/形状转换为位图的解决方法？或者我必须使用两个画布元素？

在OpenGL中，我首先使用其rgb值和a = 0绘制图像，然后仅“绘制”alpha。

Answer 1

您可以通过以下步骤解决问题：

将图像设置为图案
将模式设置为fillStyle或strokeStyle

当您现在填充/描边形状时，图像将会显示出来。只需确保初始图像适合您想要显示的区域。

显示原则的示例，您应该能够根据您的需要采用它：

var ctx = canvas.getContext("2d"),
    img = new Image,
    radius = 40;

img.onload = setup;
img.src = "http://i.imgur.com/bnAEEXq.jpg";

function setup() {
  
  // set image as pattern for fillStyle
  ctx.fillStyle = ctx.createPattern(this, "no-repeat");
  
  // for demo only, reveals image while mousing over canvas
  canvas.onmousemove = function(e) {
    var r = this.getBoundingClientRect(),
        x = e.clientX - r.left,
        y = e.clientY - r.top;
    
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.arc(x, y, radius, 0, 2*Math.PI);
    ctx.fill();
  };
}

<canvas id=canvas width=900 height=600></canvas>

希望这有帮助！

用画笔/笔画/颜料在画布上显示图像

1 个答案: