假设我在左边有精灵,我想在图像上绘制之前在图像上应用红色滤镜,使其看起来像右边的精灵。 http://puu.sh/6dQ0E.png
有办法吗? 它可以分两步完成,但我不知道是否可以绘制与图像具有完全相同形状的几何图形。 (例如:在它上面绘制一个矩形将不匹配。)
注意:我希望过滤器仅应用于此图像,而不是整个画布。
答案 0 :(得分:3)
您可以组合2个过滤操作,仅在现有精灵的基础上绘制红色滤镜。
globalCompositeOperation =“source-atop”会导致新绘图仅在现有的非透明像素上绘制。
globalAlpha 会让您的新图片变得半透明。
合在一起,你可以绘制一个半透明的滤镜,只填充你的非透明幽灵存在的地方。
然后在现有的精灵上绘制一个红色矩形(该矩形只在现有幽灵内可见)。
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>