「HTML/HTML5」の版間の差分

 

== canvas要素 ==

=== 概要 ===

[[w:canvas要素|canvas要素]]はダイナミックなビットマップ（ベクター）画像を描画する。二次元コンピュータグラフィックスはCanvas APIにより実現され<ref>https://html.spec.whatwg.org/multipage/canvas.html#2dcontext </ref>、ハードウェアアクセラレーションされた二次元及び三次元コンピュータグラフィックスは[[w:WebGL|WebGL]]を用いて実現される。

;挿入するJavaScriptコード例

<syntaxhighlight lang="javascript">

var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(0,0,200)";

 

<script>

var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(0,0,200)";

<canvas id="canvas" width="600" height="500"></canvas>

<script>

var count = 0; // 時間を数えるためのカウンター

var dummy = function draw() { // var でメモリなど確保しないと後工程が上手く行かない。

/* 背景色 */

ctx.fillRect(50 + count,30, 40, 40); // fillRectで四角を描画できる

count++; // 単なるインクリメント

} // if count の終わり

} // function の終わり

setInterval(dummy,10);

</script>

</body>

</html>

</syntaxhighlight>

実行すると、青い四角が表示され、その青い四角が、画面の左側をスタート地点として、右にむかって動いていく。

 

上記コードだと、ブラウザが動いているかぎり永遠に再描画の処理をしてしまいメモリに負担を掛けるので、下記のように clearInterval で適度なところで停止すると良い。

 

;コード例

<canvas id="canvas" width="600" height="500"></canvas>

<script>

var count = 0; // 時間を数えるためのカウンター

var dummy = function draw() { // var でメモリなど確保しないと後工程が上手く行かない。

/* 背景色 */