#プログラミング勉強日記
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);