假设我得到了左侧的 Sprite ，我想在图像上应用红色滤镜，然后再将其绘制到 Canvas 中，使其看起来像右侧的 Sprite 。 http://puu.sh/6dQ0E.png
有办法吗？ 它可以分两步完成，但我不知道是否可以绘制与图像形状完全相同的几何图形。 (例如:在其上绘制一个矩形将不匹配。)
注意:我希望滤镜只应用于此图像，而不是整个 Canvas 。
最佳答案
您可以组合 2 个过滤操作，仅在现有 Sprite 的顶部绘制红色过滤器。
globalCompositeOperation="source-atop"将导致新绘图仅绘制在现有非透明像素之上。
globalAlpha 将使您的新绘图半透明。
综合起来，您可以绘制一个半透明滤镜，该滤镜仅填充非透明幻影存在的位置。
然后只需在现有 Sprite 上绘制一个红色矩形(该矩形仅在现有幽灵内部可见)。
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/
从这里...
请注意，您的 Sprite 的黑色轮廓已从红色滤镜中洗掉。
您还可以使用 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>
关于javascript - JS : Alter Color for specific image in HTML Canvas，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20999759/