如何在畫布上對圖像進行「繪製」？

Question

我想在畫布上用圖片是這樣的：

用戶將「油漆，並填寫」的形象，但不是在輪廓的頂部。

問題是：
如果我放在畫布後面，顏料將覆蓋輪廓。
如果我把畫布上的圖像塊畫布交互。

你能幫助我嗎？

Answer 1

使用合成模式「destination-over」繪製現有內容（從圖像，矢量等）。現有內容提供Alpha通道或組合不可行。如果沒有alpha通道，您可以將convert inverse luma/matte（白色）轉換爲alpha通道。

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

Answer 2

Here是drawImage函數的例子。您可以將任何預加載的圖像繪製到畫布上。您還可以嘗試使用pointer-events: none CSS屬性將<img>疊加層放置在畫布的前面，並使用disable mouse events。