JS：改變HTML Canvas中的特定圖像的顏色

讓我說我得到了精靈在左邊，我想在圖像上應用一個紅色的過濾器，然後在畫布中繪製它，因此它看起來像右邊的精靈。 http://puu.sh/6dQ0E.png JS：改變HTML Canvas中的特定圖像的顏色

有沒有辦法做到這一點？它可以分兩步完成，但我不知道是否可以繪製與圖像具有完全相同形狀的幾何圖形。（例如：在其上畫一個矩形將不匹配。）

注意：我希望過濾器只應用於此圖像，而不是整個畫布。

來源

2014-01-08 RainingChain

您可以合併2個過濾操作，僅在現有精靈的頂部繪製紅色過濾器。

globalCompositeOperation =「source-atop」將導致新的繪圖僅在現有的非透明像素上繪製。

globalAlpha將使您的新圖紙半透明。

綜合起來，你可以畫出一個半透明的過濾器，只填充你的非透明幽靈存在的地方。

然後，只需在現有精靈上繪製一個紅色矩形（矩形將只在現有的精靈內部可見）。

enter image description here

ctx.drawImage(ghostSprites,0,0); 
ctx.globalAlpha=0.62; 
ctx.globalCompositeOperation="source-atop"; 
ctx.fillStyle="red"; 
ctx.fillRect(spriteX,spriteY,spriteWidth,spriteHeight);

演示：http://jsfiddle.net/m1erickson/W4XrG/

從這裏...

通知你的精靈變成的黑色輪廓，從紅色過濾器清洗。

你也可以使用context.getImageData來只抓住鬼的黑色像素。然後將這些黑色像素重新繪製在經過紅色濾鏡處理的幻影上，以便黑色輪廓不會被清除。如果你覺得雄心勃勃，你可以試試！

祝您的項目順利！

這裏的代碼

<style> 
    body{ background-color: ivory; padding:20px;} 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var img=new Image(); 
    img.onload=start; 
    img.crossOrigin="anonymous"; 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/temp0a.png"; 
    function start(){} 

    var spriteX=0; 
    var spriteY=0; 
    var spriteWidth=133; 
    var spriteHeight=161 

    $("#recolor").click(function(){ 
     ctx.drawImage(img,0,0); 
     ctx.globalAlpha=0.62; 
     ctx.globalCompositeOperation="source-atop"; 
     ctx.fillStyle="red"; 
     ctx.fillRect(spriteX,spriteY,spriteWidth,spriteHeight); 
    }); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <p>Before</p> 
    <img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/temp0a.png"> 
    <p>After</p> 
    <button id="recolor">Click to recolor the green sprite</button><br> 
    <canvas id="canvas" width=300 height=161></canvas> 
</body> 
</html>

來源

2014-01-08 18:02:08 markE

如果有什麼東西已經在我的畫布（例如：地圖），我畫過它這一形象？這是否意味着我會在地圖的畫布上創建一個新的畫布以便Source-Atop正常工作？ – RainingChain

是的，在你的遊戲開始之前，你會在Spritesheet上過濾你的幽靈，而不是在畫布上。保存你的紅鬼作爲一個單獨的圖像在你的遊戲中使用。 – markE

JS：改變HTML Canvas中的特定圖像的顏色

回答

相關問題