HTML 5のCanvesタグを使って時計の特効を作る
3862 ワード
<!DOCTYPE html >
<html>
<head>
</head>
<body>
<canvas id="clock" width=" 500" height=" 500">
canvas ， ！
</canvas>
<script type="text/javascript">
var clock = document.getElementById("clock");
var cxt = clock.getContext('2d');
function drawClock() {
cxt.clearRect(0, 0, 500, 500);
var now = new Date();
var sec = now.getSeconds();
var mi = now.getMinutes();
var hour = now.getHours();
hour = hour > 12 ? hour - 12 : hour;
hour = hour + mi / 60;
//
cxt.lineWidth = 13;
cxt.strokeStyle = "blue";
cxt.beginPath();
cxt.arc(250, 250, 200, 0, 360, false);
cxt.closePath();
cxt.stroke();
//
//
for (var i = 0; i < 12; i++) {
cxt.save();
//
cxt.lineWidth = 7;
//
cxt.strokeStyle = "#000";
// 0,0
cxt.translate(250, 250);
cxt.rotate(i * 30 * Math.PI / 180); // *Math/180=
cxt.beginPath();
cxt.moveTo(0, -170);
cxt.lineTo(0, -190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//
for (var i = 0; i < 60; i++) {
cxt.save();
cxt.lineWidth = 3;
cxt.strokeStyle = "#000";
cxt.translate(250, 250);
cxt.rotate(i * 6 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -180);
cxt.lineTo(0, -190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//
cxt.save();
cxt.lineWidth = 7;
cxt.strokeStyle = "#000";
cxt.translate(250, 250);
cxt.rotate(hour * 30 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -140);
cxt.lineTo(0, 10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//
cxt.save();
cxt.lineWidth = 5;
cxt.strokeStyle = "#000";
cxt.translate(250, 250);
cxt.rotate(mi * 6 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -160);
cxt.lineTo(0, 15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//
cxt.save();
cxt.lineWidth = 3;
cxt.strokeStyle = "red";
cxt.translate(250, 250);
cxt.rotate(sec * 6 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -170);
cxt.lineTo(0, 20);
cxt.closePath();
cxt.stroke();
// ， ，
cxt.beginPath();
cxt.arc(0, 0, 5, 0, 360, false);
cxt.closePath();
cxt.fillStyle = "gray";
cxt.fill();
cxt.stroke();
// ， ，
cxt.beginPath();
cxt.arc(0, -140, 3, 0, 360, false);
cxt.closePath();
cxt.fillStyle = "gray";
cxt.fill();
cxt.stroke();
cxt.restore();
}
drawClock();
window.setInterval(drawClock, 1000);
</script>
</body>
</html>