drawImageの描画順序の指定について

質問

いつもお世話になっております。

drawImageメソッドを使用し、Canvasへ画像を描画するプログラムを作成しています。
画像は全部3枚あり、座標をずらしてすべて重ねて表示します。
画像のファイルサイズはすべて異なります。
画像描画のタイミングは選択中のセレクトボックスの項目に変更があった場合です。
この際、フォームの情報によって描画順序を決定します。

本題ですが、現在のコーディングですと、指定した描画順序のとおりに描画されません。
複数の画像に対してonloadを使用しており、画像の読み込みが完了した順番に描画
されているような気がします。指定したとおりに描画できる方法はないでしょうか？

・html

<canvas id=main width=160 height=160 style=border:1px solid gray></canvas>
<form>
<hr>
描画順序
<select name=order onChange=Main(this.form)>
<option value=0>1,2,3</p>
<option value=1>1,3,2</p>
<option value=2>2,1,3</p>
<option value=3>2,3,1</p>
<option value=4>3,1,2</p>
<option value=5>3,2,1</p>
</select>
</form>

・外部ファイル(js)

function Main(f)
{
var canvas = document.getElementById('main');
if (!canvas || !canvas.getContext) {
return false;
}
var Canvas = canvas.getContext('2d');
Canvas.clearRect(0, 0, 320, 240);

var Image1 = new Image();
var Image2 = new Image();
var Image3 = new Image();

if (f.order.value == 0) {
Image1.onload = function() {
Canvas.drawImage(Image1, 0, 0);
}
Image2.onload = function() {
Canvas.drawImage(Image2, 20, 20);
}
Image3.onload = function() {
Canvas.drawImage(Image3, 40, 40);
}
Image1.src = GetImageFileName(1);
Image2.src = GetImageFileName(2);
Image3.src = GetImageFileName(3);
}
else if (f.order.value == 1) {
Image1.onload = function() {
Canvas.drawImage(Image1, 0, 0);
}
Image3.onload = function() {
Canvas.drawImage(Image3, 20, 20);
}
Image2.onload = function() {
Canvas.drawImage(Image2, 40, 40);
}
Image1.src = GetImageFileName(1);
Image3.src = GetImageFileName(3);
Image2.src = GetImageFileName(2);
}
else if (f.order.value == 2) {
Image2.onload = function() {
Canvas.drawImage(Image2, 0, 0);
}
Image1.onload = function() {
Canvas.drawImage(Image1, 20, 20);
}
Image3.onload = function() {
Canvas.drawImage(Image3, 40, 40);
}
Image2.src = GetImageFileName(2);
Image3.src = GetImageFileName(3);
：（以降省略）

よろしくお願いいたします。

回答No.2

yyr446 · ベストアンサー

それぞれのImageのonloadのイベントハンドラーで、すぐにCanvas.drawImageするのではなく、イベントハンドラー内でいったんImageたちを別の格納用配列Imagesにしまっておきます。そして、Imagesの格納数が3以上になっていれば、drawImageの処理を行うってのはどうでしょうか。

　var Image1 = new Image();
　var Image2 = new Image();
　var Image3 = new Image();
　Image1.src = GetImageFileName(1);
　Image2.src = GetImageFileName(2);
　Image3.src = GetImageFileName(3);

　x = f.order.value //グローバルスコープ

　Image1.onload = function() {
　　Images[1] = Image1;
　　if(Images.length >=3 ) draw(x);
　}
　Image2.onload = function() {
　　Images[2] = Image2;
　　if(Images.length >=3 ) draw(x);
　}
　Image3.onload = function() {
　　Images[3] = Image3;
　　if(Images.length >=3 ) draw(x);
　}

　function draw(x){
switch(x){
　 case "0":
　　 Canvas.drawImage(Images[1], 0, 0);
　　 Canvas.drawImage(Images[2], 20, 20);
　　 Canvas.drawImage(Images[3], 40, 40);
　 break;
　 case "0":

　 ..............

　 }
　}

お礼

ご回答ありがとうございます。
Image3がいちばん最初にロードされた場合、その時点で
Images.lengthは3以上になってしまいます。
そのため、カウンタを設け、ロードが完了すればカウントアップ
するようにしたところ、きちんと表示されました。

ブラウザは、firefox、opera、chrome、safariと、
excanvas.jsをロードしたIEにて確認を行いましたが、
いずれも問題ありませんでした。

ありがとうございました。

回答No.1

reggaepunc

一部端折ったりしてますが、少し書き足して、Main()の中のImage1,2,3の変数を外に出しました。canvasに描画されてるかどうかは別として、これで画像のプリロードはOKかなと思います。ポイントはinit()です。
<script>

var Image1 = new Image();
var Image2 = new Image();
var Image3 = new Image();

// プリロード用
function init()
{
Image1.src = 'photo01.jpg';
Image2.src = 'photo02.jpg';
Image3.src = 'photo03.jpg';

var bodyTag = document.body;
var div = document.createElement('div');
div.style.display = 'none';

div.appendChild( Image1 );
div.appendChild( Image2 );
div.appendChild( Image3 );

bodyTag.appendChild( div );
}
init();

// --------------------------------
function Main( f )
{
var canvas = document.getElementById('main');

if (!canvas || !canvas.getContext)
{
return false;
}

var Canvas = canvas.getContext('2d');
Canvas.clearRect(0, 0, 320, 240);

if( f.order.value == 0 )
{
// --------------------------------
Image1.onload = function()
{
Canvas.drawImage(Image1, 0, 0);
}
// --------------------------------
Image2.onload = function()
{
Canvas.drawImage(Image2, 20, 20);
}

// --------------------------------
Image3.onload = function()
{
Canvas.drawImage(Image3, 40, 40);
}

// --------------------------------
Image1.src = GetImageFileName(1);
Image2.src = GetImageFileName(2);
Image3.src = GetImageFileName(3);
}
else if (f.order.value == 1) {
Image1.onload = function() {
Canvas.drawImage(Image1, 0, 0);
}
Image3.onload = function() {
Canvas.drawImage(Image3, 20, 20);
}
Image2.onload = function() {
Canvas.drawImage(Image2, 40, 40);
}
Image1.src = GetImageFileName(1);
Image3.src = GetImageFileName(3);
Image2.src = GetImageFileName(2);
}
}
// --------------------------------
// --------------------------------
function GetImageFileName( val )
{
switch( val )
{
case 1: return 'photo01.jpg'; break;
case 2: return 'photo02.jpg'; break;
case 3: return 'photo03.jpg'; break;
}
}

</script>

お礼

ご回答ありがとうございます。
あらかじめ画像を読み込んでおくということですね。