HTML5のキャンバスでゲームを作成しようとしています。私はいくつかのスプライトを持っていますが、それらをうまく読み込むことができ、うまく動作しますが、画像の一部は具体的には#ff0000です。私はそれを他の色、カスタムユーザー定義の色に置き換えることができます。画像/スプライトで特定の色を別の色に置き換えます。
私は実際にこれをリードしていません。私は画像フィルタを見ましたが、自分の使い方に適した例は実際に見つからなかったし、自分自身でそれを考える頭がありません、私を信じて、私は試しました。
助け、鉛、その他何かが大いに感謝されます。あなたが例えばglobalCompositeOperation = "source-in"
を使用することができます
、以下の（新しい）キャンバスに画像を描画し、色を設定します。
ctx.save();
// Draw mask to buffer
ctx.clearRect(0, 0, this.width, this.height);
ctx.drawImage(your_image, 0, 0, this.width, this.height, 0, 0, this.width, this.height);
// Draw the color only where the mask exists (using source-in)
ctx.fillStyle = [your color]; //
ctx.globalCompositeOperation = "source-in";
ctx.fillRect(0, 0, this.width, this.height);
ctx.restore();
この正確な手法を使用して、ビットマップフォントの文字色を設定します。
canvasのgetImageDataを使用して、任意の色を他の色に置き換えることができます。ここで
// pull the entire image into an array of pixel data
var imageData = context.getImageData(0, 0, w, h);
// examine every pixel,
// change any old rgb to the new-rgb
for (var i=0;i<imageData.data.length;i+=4)
{
// is this pixel the old rgb?
if(imageData.data[i]==oldRed &&
imageData.data[i+1]==oldGreen &&
imageData.data[i+2]==oldBlue
){
// change to your new rgb
imageData.data[i]=newRed;
imageData.data[i+1]=newGreen;
imageData.data[i+2]=newBlue;
}
}
// put the altered data back on the canvas
context.putImageData(imageData,0,0);
は、コードとフィドルです：http://jsfiddle.net/m1erickson/4apAS/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:20px; }
img{border:1px solid red;}
</style>
<script>
$(function(){
// this just makes an image we can test with
// it's just an image of a red rectangle
var temp=document.createElement("canvas");
var tempctx=temp.getContext("2d");
tempctx.fillStyle="red";
tempctx.strokeStyle="blue";
tempctx.lineWidth=5;
tempctx.rect(20,20,75,50);
tempctx.fill();
var image0=document.getElementById("image0");
image0.src=temp.toDataURL();
var image=new Image();
image.onload=function(){
// call function to replace red with green
recolorImage(image,255,0,0,0,255,0);
}
image.src= image0.src;
function recolorImage(img,oldRed,oldGreen,oldBlue,newRed,newGreen,newBlue){
var c = document.createElement('canvas');
var ctx=c.getContext("2d");
var w = img.width;
var h = img.height;
c.width = w;
c.height = h;
// draw the image on the temporary canvas
ctx.drawImage(img, 0, 0, w, h);
// pull the entire image into an array of pixel data
var imageData = ctx.getImageData(0, 0, w, h);
// examine every pixel,
// change any old rgb to the new-rgb
for (var i=0;i<imageData.data.length;i+=4)
{
// is this pixel the old rgb?
if(imageData.data[i]==oldRed &&
imageData.data[i+1]==oldGreen &&
imageData.data[i+2]==oldBlue
){
// change to your new rgb
imageData.data[i]=newRed;
imageData.data[i+1]=newGreen;
imageData.data[i+2]=newBlue;
}
}
// put the altered data back on the canvas
ctx.putImageData(imageData,0,0);
// put the re-colored image back on the image
var img1=document.getElementById("image1");
img1.src = c.toDataURL('image/png');
}
}); // end $(function(){});
</script>
</head>
<body>
<p>Original Image</p>
<img id="image0" width=200 height=200><br/>
<p>Red recolored Green Image</p>
<img id="image1" width=200 height=200>
</body>
</html>
私はこれに問題があります。それは色のほとんどを置き換えますが、すべてを置き換えません。結果に何らかの影響がある場合は、色を変更する前にキャンバスを縮小しています。何か案は？ –
あなたは直接フルな画像に適用されることをイメージ以上の幅広い何かの特定の部分に個々のピクセルを変更するために探していますか？ – newfurniturey
画像全体を特定の色で「スキャン」して置き換えるものがあります。 –