如何在Canvas上的图像上“绘画”？

Question

我想在画布上使用这样的图像：

用户将“绘制并填充”图像，但不会在轮廓的顶部。

问题是：
如果我放在画布后面，油漆将覆盖轮廓 如果我在画布上放置图像块画布交互。

你能帮帮我们吗？

Answer 1

使用合成模式＆＃34; destination-over＆＃34;绘制现有内容（来自图像，矢量等）。现有内容提供alpha通道或合成无需工作是必要的。如果没有Alpha通道，您可以convert inverse luma / matte（白色）到alpha通道。

＆＃13;

＆＃13;

// a quick-n-dirty demo
var ctx = c.getContext("2d");
ctx.lineWidth = 10;
ctx.moveTo(100, 0); ctx.lineTo(150, 150); ctx.stroke();
ctx.fillStyle = "#09f";

// KEY: composite mode -
ctx.globalCompositeOperation = "destination-over";

// draw behind the line
c.onmousemove = function(e) {
  ctx.fillRect(e.clientX - 10, e.clientY - 10, 20, 20);
};

＆＃13;

body {margin:0}
canvas {border:#777 solid 1px}

＆＃13;

<canvas id="c"></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Here是drawImage函数的示例。您可以将任何预加载的图像绘制到画布上。您还可以尝试使用<img> CSS属性将pointer-events: none叠加层放在画布前面，disable mouse events放置它。