xhackjp1/color-change.html

## color-change.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8" />
  <title>Canvas tutorial template</title>
  <script type="text/javascript">

    var n = 0;
    var canvas = document.getElementById('tutorial');

    function init() {
      draw();
      setInterval(draw, 33);
    }

    /* fillRect()の例 */
    function draw() {
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.fillRect(20, 20, 80 + n, 40 + n);
      ctx.fillStyle = `rgb(255, ${(2*n) % 255}, 0)`;
      n = n + 1;
    }
  </script>
  <style type="text/css">
    canvas {
      background-color: #fff;
      border: 1px solid #999;
    }
  </style>
</head>

<body onload="init();">
  <canvas id="tutorial" width="800" height="800"></canvas>
</body>

</html>
	<!DOCTYPE html>
	<html lang="ja">

	<head>
	<meta charset="utf-8" />
	<title>Canvas tutorial template</title>
	<script type="text/javascript">

	var n = 0;
	var canvas = document.getElementById('tutorial');

	function init() {
	draw();
	setInterval(draw, 33);
	}

	/* fillRect()の例 */
	function draw() {
	var ctx = canvas.getContext('2d');
	ctx.beginPath();
	ctx.fillRect(20, 20, 80 + n, 40 + n);
	ctx.fillStyle = `rgb(255, ${(2*n) % 255}, 0)`;
	n = n + 1;
	}
	</script>
	<style type="text/css">
	canvas {
	background-color: #fff;
	border: 1px solid #999;
	}
	</style>
	</head>

	<body onload="init();">
	<canvas id="tutorial" width="800" height="800"></canvas>
	</body>

	</html>