■canvasに画像を出す：メモ

メモです

 canvasで画像表示

HTML記述で canvasを用いjpg,png,gifなどの画像を表示させることができます。

画像は表示位置やサイズを動的に変更することもできます。

上の画像は次の記述で表示しています。

<canvas id='canvas1' width='480' height='100' ></canvas>
<script type="text/javascript">
var img   = new Image();
img.src   = './image/P1000092.jpg';//オリジナルサイズ(2560×960)
var x_pos = 0;
var direct= -0.2;
function draw(){
   var canvas = document.getElementById('canvas1');
   var context= canvas.getContext('2d');
   context.drawImage(img
                    ,x_pos    // 画像左上のx位置（動的に変更)
                    ,-100     // 画像左上のy位置（固定)
                    ,731      // 表示画像幅（固定:オリジナルの1/3.5)
                    ,274      // 表示画像高（固定:オリジナルの1/3.5)
                    );
   pos += direct;
   if( pos>0 ) direct=-0.2;
   else if( pos<-250 ) direct=0.2;
   }
function start(){
   draw();
   setInterval(draw,100);
   }
img.onload=function(){
   start();
   }
/*
try{ // load完了で関数呼び出し
   window.addEventListener("load",start,false);
   }
catch(e){
   window.attachEvent("onload",start);
   }
*/
</script>

このプログラムではオリジナルの画像を縮小し、位置を少しずつ変更しながら canvas上に描画しています。
手続きとしては、Imageオブジェクトのsrc要素に画像のURLをセットし、 HTMLのcanvas要素からgetContext('2d')で取得した contextのdrawImageにImageと表示座標、サイズを与えています。

サイズを省略するとオリジナル画像のサイズとなります。
座標はcanvasの左上が(0,0)です。ここでは(0,-100)から(-250,-100)まで 変化させながら表示表示しています。
座標を省略すると(0,0)指定と同等になります。
なお、座標の移動を整数としていないのは、微妙なずれにより、水面の細かな模様が ざわつくのを狙ったものです。

このプログラムでは draw関数は画像読み込み完了後に呼ばれたあと、100ミリ秒ごとに呼び出されます。
setIntervel()は繰り返しの関数呼び出しを設定するメソッドです。
try..catch部はHTML読み込み完了時にstart関数を呼び出す手続きです。

注意しなくてはならないのが、HTMLの読み込み完了でcanvasの繰り返し処理をやってはならない点です。
画像読み込みが完了しない段階でcanvasの画像表示を繰り返し動かすと固まったような状態になります。
画像読み込みの完了を待って処理を始める必要があります。

 ＃＃＃「Flashの復活」を望む。

この処理は遥か以前の記事、 ◆狭山湖から見る富士山 で使っていたFlash部がスマホ/タブレットで動かなくなってしまって いたのに対処した作業のメモです。

以前の記事の多くでFlashやAppletを使っていました。

とても残念なことに、それらはスマホ/タブレットで動かない上、PCでも動かない環境 が増えてきました。

単純に 表示されない場合、 例えば「右図を見てください」とありながら右には何もないという 状況では、 記事の体裁をなさなくなるので、少しずつ 「Flashを使ってください」といったメッセージを出すようにしたり、 アニメーションgifに置き換えたり、 今回のようにCANVASに置き換えたり、YOUTUBE参照に置き換えたり していっています。

とても面倒です。Flashの復活を望みます。