html5更新画像カラーサンプルコード_html5チュートリアルスキル

复制代

代码如下:

var cID = "c1";
var image = new Image();
image.src = "目/アイテム目_1.png";
image.onload = function () {
recolorImage(cID,image, 0, 0, 0, 255, 0, 0);
}
function recolorImage(c,img, oldRed, oldGreen, oldBlue, newRed, newGreen, newBlue) {
var c = document.getElementById(c);
var ctx = c.getContext("2d");
var w = img.width;
var h = img.height;
c.width = w;
c.高さ = h;
// 一時キャンバスに画像を描画します
ctx.drawImage(img, 0, 0, w, h);
// 画像全体をピクセル データの配列に取り込みます
var imageData = ctx.getImageData(0, 0, w, h);
// すべてのピクセルを検査します。
// 古いRGBを新しいRGBに変更します。
for (var i = 0; i // このピクセルは古い RGB ですか?
if (imageData.data[i] == oldRed && imageData.data[i 1] == oldGreen && imageData.data[i 2] == oldBlue) {
// 新しい rgb に変更します
imageData.data[i] = newRed;
imageData.data[i 1] = newGreen;
imageData.data[i 2] = newBlue;
}
}
// 変更されたデータをキャンバスに戻します
ctx.putImageData(imageData, 0, 0);
}