JS:改变HTML Canvas中特定图像的颜色

时间:2014-01-08 15:27:02

标签: javascript html5 canvas drawing

假设我在左边有精灵,我想在图像上绘制之前在图像上应用红色滤镜,使其看起来像右边的精灵。 http://puu.sh/6dQ0E.png

有办法吗? 它可以分两步完成,但我不知道是否可以绘制与图像具有完全相同形状的几何图形。 (例如:在它上面绘制一个矩形将不匹配。)

注意:我希望过滤器仅应用于此图像,而不是整个画布。

1 个答案:

答案 0 :(得分:3)

您可以组合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>