|
=== 簡単な動画の例 ===
アニメーション処理などをしたい場合、円や四角などの簡単な図形を動かすだけなら、JavaScriptとcanvasタグ要素を連携させれば、webウェブブラウザで簡単な図形がアニメーションする動画を表示させられる。
詳しい解説は、たとえば[https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations モジラ公式サイト"Basic animations" ] などにある。もしかしたらブラウザの種類によって挙動が変わるかもしれないので､実用の際には都度、実機で確認のこと。
である。
;[https://plnkr.co/edit/mIHg6c4ay3DbpMHz?open=lib%2Findex.html 簡単なcanvasアニメ]:<syntaxhighlight lang="html5">
;コード例
<syntaxhighlight lang="html5">
<!DOCTYPE html>
<html lang="ja">
<head>
<title>簡単なcanvasアニメーション</title>
</head>
<body>
<canvas id="canvas" width="600" height="500"></canvas>
<script>
varlet ctx = canvas.getContext("2d"); // コンテキストの取得 // なお、以降cvsは使わない,
var count = 0; // 時間を数えるためのカウンター
var dummy = function draw() { // var でメモリなど確保しないと後工程が上手く行かない。
/* 背景色 */
ctx.clearRect(0,0,600,500); // clearRect プロパティにて範囲指定で消せる
/* 描画オブジェクト */
ctx.fillStyle="#00F";// 青い四角をこれから動かす
ctx.fillRect(50 + count,30, 40, 40); // fillRectで四角を描画できる
count++; // 単なるインクリメント
} // if count の終わり
} // function の終わり
</script>
</body>
</html>
</syntaxhighlight>
実行すると、青い四角が表示され、その青い四角が、画面の左側をスタート地点として、右にむかって動いていく。
▲ setInterval( dummy,10() ; => {
上記コードだと、ブラウザが動いているかぎり永遠に再描画の処理をしてしまいメモリに負担を掛けるので、下記のように clearInterval で適度なところで停止すると良い。
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = `hsl(${360*count/255},100%,50%)`;
;コード例
ctx.fillRect(count, count, 40 + count/2, 40 + count/2);
<syntaxhighlight lang="html5">
<!DOCTYPE html>
▲ if (count <%= 300){256;
<html lang="ja">
<head>
<title>簡単なcanvasアニメ</title>
</head>
<body>
<canvas id="canvas" width="600" height="500"></canvas>
<script>
var ctx = canvas.getContext("2d"); // コンテキストの取得 // なお、以降cvsは使わない
var count = 0; // 時間を数えるためのカウンター
var dummy = function draw() { // var でメモリなど確保しないと後工程が上手く行かない。
/* 背景色 */
ctx.clearRect(0,0,600,500); // clearRect プロパティにて範囲指定で消せる
/* 描画オブジェクト */
ctx.fillStyle="#00F";// 青い四角をこれから動かす
ctx.fillRect(50 + count,30, 40, 40); // fillRectで四角を描画できる
count++; // 単なるインクリメント
} // if count の終わり
// 追加
if(count > 150){
clearInterval(kakuho);
} // if count の終わり
// 上記を追加
} // function の終わり
// 下記コードが追加された
var kakuho = setInterval(dummy,10); // setInterval の終わり // var で確保しないと clear で止まらない場合あり
</script>
</body>
</html>
</syntaxhighlight>
実行すると、途中でclearInterval しているので、描画の終了位置が前回と変更して、半分くらい進行した位置で止まるのが確認できるだろう。
なお setInterval などはアニメの描画以外の用途にも、使用することができる。図形を描画する用途でないならば、わざわざ canvas タグを使う必要も無いが、この節の範中を超えるので、この節ではアニメ以外の用途については説明を省略する。
== ページ内がいくつかの文書に分割される場合 ==
| 