【HTML&JavaScript】canvasでアニメーションを作る方法

5398 ワード
HTML canvas JavaScript プログラミング勉強日記 初心者 HTML テキストリンク

プログラミング勉強日記

2020年11月13日
10月の記事でHTMLでcanvasを使うと図形を描ける方法を扱ったが、JavaScriptと組み合わせることでアニメーションを作れると知ったのでその方法をまとめる。

アニメーションを作成する方法

　Canvasはまず、HTML内にCanvasタグを用いてアニメーションを描画する範囲を指定する必要がある。タグを指定して、JavaScriptで動的な動きをかく。

<!--idがCanvasの100×100の大きさのCanvasを作成する -->
<canvas id="Canvas" width="100" height="100"></canvas>

サンプルコード

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="sample.js"></script>
    <style>
      #canvas{
        background:#999;
      }
    </style>
  </head>
  <body>
    <!-- Canvasタグでキャンバスを描写する -->
    <canvas id="canvas" width="100" height="100"></canvas>
  </body>
</html>
JavaScript
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");

//アニメーションカウンター
var count = 0;
var timer = setInterval(function(){
  ctx.fillStyl = "#fff"; // 消去時の色
  ctx.clearRect(0,0,300,300);  // 消す
  ctx.fillStyle = "#f00"; // 塗りつぶし色を赤に
  ctx.fillRect(30 + count, 30 + count, 30, 30);
  count++;
  if(count > 200){
    clearInterval(timer);
  }
},100);

参考文献

Canvasを覚える！HTMLでアニメーションを作成する方法【初心者向け】

Kotlin使用可能空変数および空値チェック
Java配列とArraysクラス