javascriptのcanvasについて
先日こちらで質問させて頂き、頂いた回答をもとに
javascriptのcanvasについて勉強を続けていて、
canvasを2つ重ねたカラーシミュレーションのようなものを作りたいと考えています。
先日教えて頂いた内容をもとに
下記のような記述で2枚目のcanvasの画像を入れ替えることや、
色を変更することは出来ました。
ただ、「進む」ボタンや「戻る」ボタンを押したときに
色がもとの色に戻ってしまうので、色は固定されたまま（この記述でいうと茶色や赤）で
画像を入れ替える方法がわからずにいます。
なにか良い方法はないでしょうか。
<style type="text/css">
.canvas001 {
position: absolute;
top:100px;
left:0px;
}
.canvas002{
position: absolute;
top:100px;
left:0px;
}
</style>
<script>
onload = function() {
image1();
image2();
image3();};
function image1() {
var cnvs = document.getElementById('canvas1');
var ctx = cnvs.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = "face.png";
};
function image2() {
var cnvs = document.getElementById('canvas2');
var ctx = cnvs.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = "hair1.png";
};
var src = [
'hair1.png',
'hair2.png',
'hair3.png'
];
var currentIndex = 0;
var currentImage;
function hair(){
var img = currentImage = new Image();
img.onload = function() {
if(currentImage === img){
var cnvs = document.getElementById('canvas2');
var ctx = cnvs.getContext('2d');
ctx.clearRect(0, 0, cnvs.offsetWidth, cnvs.offsetHeight);
ctx.drawImage(img, 0, 0);
}
};
img.src = src[currentIndex];
}
window.back = function(){
currentIndex = (currentIndex - 1 + src.length) % src.length;
hair();
}
window.foward = function(){
currentIndex = (currentIndex + 1) % src.length;
hair();
}
function black(){
var ctx = document.getElementById("canvas2").getContext("2d");
var imagedata = ctx.getImageData(0,0,300,300);
var idata = imagedata.data;
var num = idata.length;
var pix = num / 4;
for ( var i = 0 ; i < pix ; i++ ){
var r = idata[ i*4 ];
var g = idata[ i*4 + 1 ];
var b = idata[ i*4 + 2 ];
idata[ i*4 ] = 35;
idata[ i*4 + 1 ] = 24;
idata[ i*4 + 2 ] = 21;
}
ctx.putImageData(imagedata,0,0);
}
function brown(){
var ctx = document.getElementById("canvas2").getContext("2d");
var imagedata = ctx.getImageData(0,0,300,300);
var idata = imagedata.data;
var num = idata.length;
var pix = num / 4;
for ( var i = 0 ; i < pix ; i++ ){
var r = idata[ i*4 ];
var g = idata[ i*4 + 1 ];
var b = idata[ i*4 + 2 ];
idata[ i*4 ] = 140;
idata[ i*4 + 1 ] = 96;
idata[ i*4 + 2 ] = 37;
}
ctx.putImageData(imagedata,0,0);
}
function red(){
var ctx = document.getElementById("canvas2").getContext("2d");
var imagedata = ctx.getImageData(0,0,300,300);
var idata = imagedata.data;
var num = idata.length;
var pix = num / 4;
for ( var i = 0 ; i < pix ; i++ ){
var r = idata[ i*4 ];
var g = idata[ i*4 + 1 ];
var b = idata[ i*4 + 2 ];
idata[ i*4 ] = 182 ;
idata[ i*4 + 1 ] = 0;
idata[ i*4 + 2 ] = 5;
}
ctx.putImageData(imagedata,0,0);
}
</script>
<body>
<div>
<div class="canvas001"><canvas id="canvas1" height="300"></canvas></div>
<div class="canvas002"><canvas id="canvas2" height="300"></canvas></div>
</div>
<div>
<form><div>
<INPUT TYPE=button NAME="submit" VALUE="戻る" onClick="back()">
<INPUT TYPE=button NAME="submit" VALUE="進む" onClick="foward()">
</div></form>
</div>
<img src="btn_black.png" onclick="black()" >
<img src="btn_brown.png" onclick="brown()" >
<img src="btn_red.png" onclick="red()" >
</body>
お礼
taloo様、 ご回答ありがとうございます。 以下を試しましたが、やはりうまくいきません。 プリロードのほうは、まだ試していないのですが、以下の方法でNGなので、同様にNGかと思います。 > img.onload=function(){ctx.drawImage(this, 0, 0);}; canvasを使用する理由ですが、canvasにテキストを挿入して、簡単なお絵かきツールのようなサービスを提供しようと思っています。ですので、canvasのほうが使い勝手が良いと思い使用することとしています。
補足
そのご、プロジェクトの設定やらを変更したり、イメージのストア先を変更したらうまくいくようになりました。 Taloo様、 ご丁寧にアドバイス頂きありがとうございました。