Question

我需要通过canvas元素将单色（黑色）位图图像（艺术线条）应用到2色（红色和黄色）位图图像（图案）上，并且仅将该图案的红色像素应用于叠加的线条艺术，有点像交叉。我看到了这个： https://developer.mozilla.org/en/docs/Web/Guide/HTML/Canvas_tutorial/Compositing（请参阅globalCompositeOperation＆gt; Darker方法），并想知道这种效果是否符合我的要求。由于该方法似乎不再受支持，有没有办法模拟这种效果？用于此的所有图像仅包含专色（100％红色，100％黄色，100％黑色，100％白色）。任何导致解决方案的javascript代码示例或提示都会很棒。输入的Thx。

Answer 1

如果您只能将红色部分隔离到单独的图像上，那么您可以使用合成来重新着色黑色与红色相交的位置。

否则，您可以使用context.getImageData抓取两个图像上的所有像素颜色。

然后你可以将红色像素更改为黑色，其中红色和＆amp;黑色相交。

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>

HTML5画布|图案显示基于图案像素颜色的重叠线条艺术

1 个答案: