html5 js canvas实现机械表效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5 js canvas实现机械表效果</title>
</head>
<body>
<canvas id="dom" width="150" height="150">您的浏览器不兼容canvas</canvas>
<script type="text/javascript">
var canvas = document.getElementById('dom';
var context = canvas.getContext('2d';
var height = context.canvas.height;
var width = context.canvas.width;
var r = width / 2;
var rem = width / 200;
function drawBackground( {
context.save(;
context.translate(r, r;
context.beginPath(;
context.lineWidth = 8 * rem;
context.strokeStyle = "#000"
context.arc(0, 0, r - 5 * rem, 0, 2 * Math.PI, false;
context.stroke(;
context.closePath(;
var houseNumble = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
houseNumble.forEach(function (number, i {
context.textAlign = 'center';
context.textBaseline = 'middle'
context.font = 18 * rem + 'px Arial'
var rad = 2 * Math.PI / 12 * i;
var x = Math.cos(rad * (r - 30 * rem;
var y = Math.sin(rad * (r - 30 * rem;
context.fillText(number, x, y;
}
for (var i = 0; i < 60; i++ {
var rad = 2 * Math.PI / 60 * i;
var x = Math.cos(rad * (r - 18 * rem;
var y = Math.sin(rad * (r - 18 * rem;
context.beginPath(;
if (i % 5 == 0 {
context.fillStyle = "#000"
context.arc(x, y, 2 * rem, 0, 2 * Math.PI;
} else {
context.fillStyle = "#ccc"
context.arc(x, y, 2 * rem, 0, 2 * Math.PI;
}
context.fill(;
context.closePath(;
}
}
function drawHour(hour, minute {
context.save(;
context.beginPath(;
context.lineWidth = 6 * rem;
context.lineCap = 'round'
var rad = 2 * Math.PI / 12 * hour;
var mrad = 2 * Math.PI / 12 / 60 * minute;
context.rotate(rad + mrad;
context.moveTo(0, 10 * rem;
context.lineTo(0, -r / 2;
context.stroke(;
context.restore(;
}
function drawMinute(minute {
context.save(;
context.beginPath(;
context.lineWidth = 3 * rem;
context.lineCap = 'round';
var rad = 2 * Math.PI / 60 * minute;
context.rotate(rad;
context.moveTo(0, 15 * rem;
context.lineTo(0, -r + 34
context.stroke(;
context.restore(;
}
function drawSecond(second {
context.save(;
context.beginPath(;
context.lineWidth = 2 * rem;
context.lineCap = 'round';
context.fillStyle = "red"
var rad = 2 * Math.PI / 60 * second;
context.rotate(rad;
context.moveTo(-2, 20;
context.lineTo(2, 20;
context.lineTo(1, -r + 18;
context.lineTo(-1, -r + 18;
context.fill(;
context.restore(;
}
function drawDot( {
context.beginPath(;
context.fillStyle = "#fff"
context.arc(0, 0, 4 * rem, 0, 2 * Math.PI, false;
context.fill(;
}
function Draw( {
context.clearRect(0, 0, width, height;
var time = new Date(;
var hour = time.getHours(;
var minute = time.getMinutes(;
var second = time.getSeconds(;
drawBackground(;
drawHour(hour, minute;
drawMinute(minute;
drawSecond(second;
drawDot(;
context.restore(
}
Draw(;
setInterval(Draw, 1000;
</script>
</body>
</html>