下のCanvasに画像を表示させます
Html コード
<div id="canvas"> <canvas id="canvas-main" width="640px" height="480px"></canvas> <canvas id="canvas-sub" width="640px" height="480px"></canvas> </div>
css コード
#canvas { position: relative; width: 640px;; height: 480px; margin: 0 auto; border: 1px black solid; } #canvas-main { position:absolute; z-index: 1; left: 0px; top: 0px; } #canvas-sub { position:absolute; z-index: 100; left: 0px; top: 0px; }
同じサイズのCanvaを２枚作成します
z-indexを使って同じ位置に重ねます、canvas-subが上に来るようにしています
Javascript コード
put( "img0012.jpg", "canvas-main" ); put( "yukiho.png", "canvas-sub" );
function put( file, id, mod ) { if( mod == undefined ) mod = "center"; /* canvas オブジェクトの取得 */ var canvas = document.getElementById( id ); /* canvas要素 ＆ ブラウザ未対応の対処 */ if( ! canvas || ! canvas.getContext ) return false; /* 2D コンテキスト */ var ctx = canvas.getContext( '2d' ); /* img オブジェクトの作成 */ var img = new Image( ); /* 画像のキャッシュを無効にするため細工 */ img.src = file + "?" + new Date().getTime(); /* 画像が読み込み終わるまで待ってから画像を表示 */ img.onload = function( ) { var x = 0, y = 0; /* mod に応じて位置を変更する */ switch( mod ) { case "center": x = ( canvas.clientWidth - img.width ) / 2; y = ( canvas.clientHeight - img.height ) / 2; break; case "right": x = canvas.clientWidth - img.width; y = canvas.clientHeight - img.height; break; } ctx.clearRect( 0, 0, img.width, img.height ); ctx.drawImage( img, x, y ); } }
前回の物を修正して、デフォルトで真ん中に表示するようにしました。