キャンバス時計
これらの章では、HTMLキャンバスを使用してアナログ時計を作成します。
パートI-キャンバスを作成する
時計にはHTMLコンテナが必要です。HTMLキャンバスを作成します。
HTMLコード：
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400"
height="400" style="background-color:#333"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawClock();
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
}
</script>
</body>
</html>
コードの説明
HTMLの<canvas>要素をページに追加します。
<canvas id="canvas" width="400"
height="400" style="background-color:#333"></canvas>
HTMLキャンバス要素からキャンバスオブジェクト（varキャンバス）を作成します。
var canvas =
document.getElementById("canvas");
キャンバスオブジェクトの2D描画オブジェクト（var ctx）を作成します。
var ctx = canvas.getContext("2d");
キャンバスの高さを使用して、時計の半径を計算します。
var radius
= canvas.height / 2;
キャンバスの高さを使用して時計の半径を計算すると、すべてのキャンバスサイズで時計が機能します。
（描画オブジェクトの）（0,0）位置をキャンバスの中心に再マップします。
ctx.translate(radius, radius);
時計の半径を（90％に）減らして、時計をキャンバスの内側にうまく描画します。
radius = radius * 0.90;
時計を描く関数を作成します。
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle =
"white";
ctx.fill();
}