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>
お礼
なるほど！どこかのサイトで調べた際にそういった事が載せられていましたが、その時はあまりピンと来なくて… こういう形で問題が発生するんですね！ 解りやすく説明していただきありがとうございました！