動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合は ヘルプ「動画が見られない場合について」 もご覧ください。
<!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>
body {
background: #222;
}
canvas {
background: #fff;
}
'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();
}
サーバーとの接続が切断されました。ブラウザを再読込してみてください。
保存しました
ファイル構成
- index.html
- /css/styles.css
- /js/main.js
ブラウザ実行環境を使ってみよう！
このレッスンでは、こちらにコードを打ち込みながら学習を進めていくことができます。
手元で実際に動作を確認しながら理解を深めていくと良いでしょう。
この機能を利用するにはプレミアムサービスへの登録が必要です。
