index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>My Canvas</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<canvas width="600" height="240">
Canvas not supported.
</canvas>
<script src="js/main.js"></script>
</body>
</html>css/styles.css
body {
background: #222;
}
canvas {
background: #fff;
}js/main.js
'use strict';
{
let t = 0;
function draw() {
const canvas = document.querySelector('canvas');
if (typeof canvas.getContext === 'undefined') {
return;
}
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.ellipse(100, 100, 40, 30, 0, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
ctx.beginPath();
ctx.ellipse( 80 + Math.sin(t / 30), 100, 8, 8, 0, 0, 2 * Math.PI);
ctx.ellipse(120 + Math.sin(t / 30), 100, 8, 8, 0, 0, 2 * Math.PI);
ctx.fillStyle = 'skyblue';
ctx.fill();
t++;
setTimeout(draw, 10);
}
draw();
}
