HTML5 Canvas |根據圖案像素顏色顯示疊加線條圖案的圖案

我需要通過畫布元素將一種顏色（黑色）位圖圖像（線條藝術）應用到2色（紅色和黃色）位圖圖像（圖案）上，並且具有隻有該圖案的紅色像素才被覆蓋的線條藝術着色，有點像相交。我看到： https://developer.mozilla.org/en/docs/Web/Guide/HTML/Canvas_tutorial/Compositing（請參閱globalCompositeOperation> Darker方法），並想知道這種效果是否是我需要的。由於該方法不再支持，有沒有辦法模擬這種效果？所有用於此的圖像僅包含專色（100％紅色，100％黃色，100％黑色，100％白色）。任何導致解決方案的JavaScript代碼示例或提示都將非常棒。 Thx輸入。HTML5 Canvas |根據圖案像素顏色顯示疊加線條圖案的圖案

來源

2014-09-13 koolness

如果您只能將紅色部分分離到單獨的圖像上，那麼您可以使用合成來重新着色黑色與紅色相交處。

否則，您可以使用context.getImageData獲取兩個圖像上的所有像素顏色。

然後，您可以將紅色像素更改爲黑色，其中紅色相交爲&。

enter image description here

示例代碼和演示：http://jsfiddle.net/m1erickson/pcsmbr22/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; margin:20px; } 
    canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var canvasB=document.getElementById("black"); 
    var ctxB=canvasB.getContext("2d"); 
    var canvasC=document.getElementById("color2"); 
    var ctxC=canvasC.getContext("2d"); 

    ctxB.fillRect(50,50,50,100); 
    ctxC.fillStyle='yellow'; 
    ctxC.fillRect(75,50,50,50); 
    ctxC.fillStyle='red'; 
    ctxC.fillRect(75,100,50,50); 

    var iDataB=ctxB.getImageData(0,0,canvasB.width,canvasB.height); 
    var dataB=iDataB.data; 
    var iDataC=ctxC.getImageData(0,0,canvasC.width,canvasC.height); 
    var dataC=iDataC.data; 

    // copy yellow-red onto results canvas 
    ctx.drawImage(canvasC,0,0); 

    var iData=ctx.getImageData(0,0,canvas.width,canvas.height); 
    var data=iData.data; 

    // copy black pixels when intersecting red pixels 
    for(var i=0;i<dataC.length;i+=4){ 
     var isBlack=(dataB[i]==0 && dataB[i+1]==0 && dataB[i+2]==0 && dataB[i+3]==255); 
     var isRed=(dataC[i]==255 && dataC[i+1]==0 && dataC[i+2]==0 && dataC[i+3]==255); 
     if(isBlack && isRed){ 
      data[i]=0; 
      data[i+1]=0; 
      data[i+2]=0; 
      data[i+3]=255; 
     } 
    } 
    ctx.putImageData(iData,0,0); 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <canvas id="black" width=200 height=200></canvas> 
    <canvas id="color2" width=200 height=200></canvas> 
    <canvas id="canvas" width=200 height=200></canvas> 
</body> 
</html>

來源

2014-09-13 20:33:55 markE

不錯！我還發現一些代碼可以產生類似的理想，適用於包含顏色陰影的像素：http：//jsfiddle.net/26N7S/3/ – koolness 2014-09-13 20:53:37

HTML5 Canvas |根據圖案像素顏色顯示疊加線條圖案的圖案

回答

相關問題