我想在 Canvas 上使用这样的图像:
用户将“绘制并填充”图像,但不在轮廓之上。
问题是:
如果我放在 Canvas 后面,颜料就会覆盖轮廓。
如果我将图像放在 Canvas 上,则会阻止 Canvas 交互。
你们能帮我吗?
最佳答案
使用合成模式“destination-over”在现有内容(来自图像、矢量等)后面绘制。现有内容必须提供 Alpha channel ,否则合成将无法工作。如果没有 alpha channel ,您可以 convert inverse luma / matte (白色)到 Alpha channel 。
// 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);
};
body {margin:0}
canvas {border:#777 solid 1px}
<canvas id="c"></canvas>
关于javascript - 如何在 Canvas 上的图像上执行 "paint"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40907035/