「HTML/HTML5」の版間の差分
削除された内容 追加された内容
→canvas要素: アニメーション javascript |
|||
92 行
== canvas要素 ==
=== 概要 ===
[[w:canvas要素|canvas要素]]はダイナミックなビットマップ（ベクター）画像を描画する。二次元コンピュータグラフィックスはCanvas APIにより実現され<ref>https://html.spec.whatwg.org/multipage/canvas.html#2dcontext </ref>、ハードウェアアクセラレーションされた二次元及び三次元コンピュータグラフィックスは[[w:WebGL|WebGL]]を用いて実現される。
148 ⟶ 149行目:
ctx.fillRect(始点x座標, 始点y座標, 横幅, 縦幅);
です。（第3引数と第4引数は、終点の座標位置ではないので、混同しないように注意しましょう。）
=== 簡単な動画の例 ===
アニメーション処理などをしたい場合、円や四角などの簡単な図形を動かすだけなら、JavaScriptとcanvasタグを連携させれば、webブラウザで簡単な図形がアニメーションする動画を表示させられる。
コード例
<syntaxhighlight lang="html5">
<!DOCTYPE html>
<html lang="ja">
<head>
<title>簡単なcanvasアニメ</title>
</head>
<body>
<canvas id="canvas" width="600" height="500"></canvas>
<script>
var cvs = document.getElementById("canvas"); // canvas要素の作成
var ctx = cvs.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で四角を描画できる
if(count < 300){
count++; // 単なるインクリメント
} // if count の終わり
} // function の終わり
setInterval(dummy,10); // setInterval の終わり
</script>
</body>
</html>
</syntaxhighlight>
:(※ Forefox 93 でFedora Linux 35 にて動作確認。)
実行すると、青い四角が表示され、その青い四角が、画面の左側をスタート地点として、右にむかって動いていく。
== ページ内がいくつかの文書に分割される場合 ==
| |||