Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

キャンバスを使用したHTML5のフレームごとのアニメーション

キャンバスを使用してHTML5でフレームごとのアニメーションを作成するには、次のコードを実行してみてください。

var myImageNum = 1;
var lastImage = 5;

var context = canvas.getContext('2d');
var img = new Image;

img.onload = function(){
   context.clearRect( 0, 0, context.canvas.width, context.canvas.height );
   context.drawImage( img, 0, 0 );
};

var timer = setInterval( function(){
   if (myImageNum > lastImage){
      clearInterval( timer );
   }else{
      img.src = "images/left_hnd_"+( myImageNum++ )+".png";
   }
}, 1000/15 );

  1. HTML5でdrawImage（）を使用して画像を描画する方法は？

    HTML5 drawImage（）メソッドは、キャンバス上に画像、キャンバス、またはビデオを描画するために使用されます。また、画像の一部を描画します。また、画像サイズを拡大または縮小するために使用することもできます。 これがdrawImage（）メソッドのパラメータ値です- Sr.No drawImage（）パラメータと説明 1 img 画像、キャンバス、またはビデオを指定します。 2 sx xクリッピングを開始する場所を調整します。これはオプションです。 3 sy yクリッピングを開始する場所を調整します。こ

  2. HTML5キャンバスで画像を使用する方法は？

    HTML5 タグは、スクリプトを使用してグラフィックやアニメーションなどを描画するために使用されます。 HTML5で導入された新しいタグです。 HTML5キャンバスで画像を使用するには、drawImage（）メソッドを使用します。このメソッドは、指定された画像をキャンバスに描画します。 次のコードを実行して、HTMLCanvasで画像を使用する方法を学ぶことができます。ここで、画像は画像またはキャンバスオブジェクトへの参照です。 xとyは、画像を配置するターゲットキャンバス上の座標を形成します。 例 <!DOCTYPE HTML> <html>