xhackjp1/ver1.html

## ver1.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8" />
  <title>Canvas tutorial template</title>
  <script type="text/javascript">
    const WIDTH = 800;
    const HEIGHT = 800;
    const PI_2 = Math.PI * 2;
    var ctx;
    var Ball = function(speedX, speedY, locationX, locationY, radius, red, green, blue) {
      this.speedX = speedX;
      this.speedY = speedY;
      this.locationX = locationX;
      this.locationY = locationY;
      this.radius = radius;
      this.red = red;
      this.green = green;
      this.blue = blue;
    }

    function createBall() {
      var canvas = document.getElementById('tutorial');
      if (canvas.getContext) {
        ctx = canvas.getContext('2d');
        let ball = new Ball(
          Math.random() * 8.0 - 4.0,
          Math.random() * 8.0 - 4.0,
          WIDTH / 2,
          HEIGHT / 2,
          Math.random() * 45.0 + 1.0,
          Math.floor(Math.random() * 96),
          Math.floor(Math.random() * 96),
          Math.floor(Math.random() * 96)
        );

        ctx.beginPath();
        ctx.fillStyle = 'rgb(' + ball.red + ',' + ball.green + ',' + ball.blue + ')';
        ctx.arc(ball.locationX, ball.locationY, ball.radius, 0, PI_2, true);
        ctx.fill();
      }
    }
  </script>
  <style type="text/css">
    canvas {
      background-color: #000;
      border: 1px solid #999;
    }
  </style>
</head>

<body onclick="createBall();">
  <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">
	const WIDTH = 800;
	const HEIGHT = 800;
	const PI_2 = Math.PI * 2;
	var ctx;
	var Ball = function(speedX, speedY, locationX, locationY, radius, red, green, blue) {
	this.speedX = speedX;
	this.speedY = speedY;
	this.locationX = locationX;
	this.locationY = locationY;
	this.radius = radius;
	this.red = red;
	this.green = green;
	this.blue = blue;
	}

	function createBall() {
	var canvas = document.getElementById('tutorial');
	if (canvas.getContext) {
	ctx = canvas.getContext('2d');
	let ball = new Ball(
	Math.random() * 8.0 - 4.0,
	Math.random() * 8.0 - 4.0,
	WIDTH / 2,
	HEIGHT / 2,
	Math.random() * 45.0 + 1.0,
	Math.floor(Math.random() * 96),
	Math.floor(Math.random() * 96),
	Math.floor(Math.random() * 96)
	);

	ctx.beginPath();
	ctx.fillStyle = 'rgb(' + ball.red + ',' + ball.green + ',' + ball.blue + ')';
	ctx.arc(ball.locationX, ball.locationY, ball.radius, 0, PI_2, true);
	ctx.fill();
	}
	}
	</script>
	<style type="text/css">
	canvas {
	background-color: #000;
	border: 1px solid #999;
	}
	</style>
	</head>

	<body onclick="createBall();">
	<canvas id="tutorial" width="800" height="800"></canvas>
	</body>

	</html>