JS:为HTML画布中的特定图像更改颜色 [英] JS: Alter Color for specific image in HTML Canvas
问题描述
比方说，我将精灵放在左侧，我想在画布上绘制图像之前在图像上应用红色滤镜，以使其看起来像右侧的精灵.
从这里...
请注意，您的精灵的黑色轮廓已从红色滤镜中冲洗掉.
您还可以使用context.getImageData来仅捕获幽灵的黑色像素.然后将这些黑色像素重画在经过红色过滤的鬼影上，以免黑色轮廓被洗掉.如果您有雄心壮志，可以尝试一下！
祝您的项目好运！
此处的代码
< style>身体{background-color:象牙色；内边距:20px;}#canvas {border:1px纯红色；}</style>< script>$(function(){var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var img = new Image();img.onload =开始;img.crossOrigin ="anonymous";img.src ="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/temp0a.png";函数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);});});//结尾$(function(){});</script></head><身体>< p>之前</p>< img src ="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/temp0a.png"></p之后；< p>< button id ="recolor">单击以重新着色绿色sprite</button>< br>< canvas id ="canvas" width = 300 height = 161</canvas></body></html> Let say I got the sprite to the left and I want to apply a red filter over the image before drawing it in a canvas so it looks like the sprite to the right. http://puu.sh/6dQ0E.png
Is there a way to do that? It could be done in two steps, but I don't know if it's possible to draw the geometric figure that has the exact same shape than the image. (Ex: Drawing a rectangle over it won't match.)
Note: I want the filter to only be applied to this image, not the whole canvas.
You can combine 2 filtering operations to draw the red filter only on top of your existing sprite.
globalCompositeOperation="source-atop" will cause new drawings to only draw on top of existing non-transparent pixels.
globalAlpha will make your new drawings semi-transparent.
Taken together, you can draw a semi-transparent filter that only fills where your non-transparent ghost exsits.
Then just draw a red rectangle over your existing sprite (the rectangle will only be visible inside the existing ghost).
ctx.drawImage(ghostSprites,0,0);
ctx.globalAlpha=0.62;
ctx.globalCompositeOperation="source-atop";
ctx.fillStyle="red";
ctx.fillRect(spriteX,spriteY,spriteWidth,spriteHeight);
Demo: http://jsfiddle.net/m1erickson/W4XrG/
From here...
Notice the black outlines of your sprite become washed from the red filter.
You could also use context.getImageData to grab only the black pixels of your ghost. Then redraw those black pixels over your red-filtered ghost so the black outlines are not washed. If you feel ambitious, you could give that a try!
Good luck with your project!
Here’s code
<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>
这篇关于JS:为HTML画布中的特定图像更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
