javascript - 使用绘图/笔触/绘画在 Canvas 上显示图像

Question

我想实现以下目标:

1. 在 Canvas 上绘制背景图像(一次或如果需要重复)
2. 图片不应该在开头可见
3. 当我在 Canvas 上“绘制”形状时，bg-image 应该在绘制形状的位置可见

将显示的图像部分应“绘制”(如用刷子)，因此我想使用笔触。

我试过的:- 不要清除 Canvas - 使用 globalCompositeOperation = 'destination-in' 将矩形绘制到 Canvas 这行得通，矩形显示了图像，但我需要描边

如果我使用笔画，它们会被“destination-in”忽略，而我使用正常的 globalCompositeOperation 看到它们。

这是为了忽略笔划吗？有没有像以某种方式将笔划/形状转换为位图的解决方法？还是我必须使用两个 Canvas 元素？

在 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>

希望这对您有所帮助!