一代码
<!DOCTYPE html >
<head>
<meta charset="UTF-8" >
<title>绘制动态时钟</title>
<script type="text/javascript">
var canvas;
var context;
function window_onload() {
canvas = document.getElementById("canvas");
context = canvas.getContext(‘2d‘);
setInterval("draw()",1000);
}
function draw() {
var radius = Math.min(canvas.width / 2, canvas.height / 2) - 25;
var centerx = canvas.width / 2;
var centery = canvas.height / 2;
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.fillStyle = ‘#efefef‘;
context.strokeStyle = ‘#c0c0c0‘;
context.beginPath();
context.arc(centerx, centery, radius, 0, Math.PI*2, 0);
context.fill();
context.stroke();
context.closePath();
context.restore();
var r = radius - 10;
context.font = ‘bold 16px 宋体‘;
Drawtext(‘1‘, centerx + (0.5 * r), centery - (0.88 * r));
Drawtext(‘2‘, centerx + (0.866 * r), centery - (0.5 * r));
Drawtext(‘3‘, centerx + radius-10, centery);
Drawtext(‘4‘, centerx + (0.866 * r), centery + (0.5 * r));
Drawtext(‘5‘, centerx + (0.5 * r), centery + (0.866 * r));
Drawtext(‘6‘, centerx , centery +r);
Drawtext(‘7‘, centerx - (0.5 * r), centery + (0.866 * r));
Drawtext(‘8‘, centerx - (0.866 * r), centery + (0.49 * r));
Drawtext(‘9‘, centerx-radius+10, centery);
Drawtext(‘10‘, centerx - (0.866 * r), centery - (0.50 * r));
Drawtext(‘11‘, centerx - (0.51 * r), centery - (0.88 * r));
Drawtext(‘12‘, centerx, 35);
context.save();
context.fillStyle = ‘black‘;
context.beginPath();
context.arc(centerx, centery, 3, 0, Math.PI * 2, 0);
context.closePath();
context.fill();
context.stroke();
context.restore();
//var date = new date();
// var h = date.getHours();
//var m = date.getMinutes();
//var s = date.getSeconds();
//var a = ((h / 12) * Math.PI * 2) - 1.57 + ((m / 60) * 0.524);
var h = 13;
var m = 24;
var s = 59;
var a = ((h / 12) * Math.PI * 2) - 1.57 + ((m / 60) * 0.524);
context.save();
context.lineWidth = 3;
context.fillStyle = ‘darkgray‘;
context.strokeStyle = ‘gray‘;
context.beginPath();
context.arc(centerx, centery, radius - 55, a + 0.01, a, 1);
context.lineTo(centerx, centery);
context.arc(centerx, centery, radius - 40, ((m / 60) * 6.27) - 1.57, ((m / 60) * 6.28) - 1.57, 0);
context.lineTo(canvas.width / 2, canvas.height / 2);
context.arc(centerx, centery, radius - 30, ((s / 60) * 6.27) - 1.57, ((s / 60) * 6.28) - 1.57, 0);
context.lineTo(centerx, centery);
context.closePath();
context.fill();
context.stroke();
context.restore();
var hours = String(h);
var minutes = String(m);
var seconds = String(s);
if (hours.length == 1) h = ‘0‘ + h;
if (minutes.length == 1) m = ‘0‘ + m;
if (seconds.length == 1) s = ‘0‘ + s;
var str = h + ‘:‘ + m + ‘:‘ + s;
Drawtext(str, centerx, centery + radius + 12);
}
function Drawtext(text, x, y) {
context.save();
x -= (context.measureText(text).width / 2);
y += 9;
context.beginPath();
context.translate(x, y);
context.fillText(text, 0, 0);
context.restore();
}
</script>
<style type="text/css">
div
{
display:-moz-box;
display:-webkit-box;
-moz-box-pack:center;
-webkit-box-pack:center;
width:100%;
}
canvas
{
background-color:White;
}
</style>
</head>
<body onload="window_onload()">
<div><h1>使用canvas元素绘制指针动画时钟</h1></div>
<div><canvas id="canvas" width="200px" height="200px"></canvas></div>
</body>
</html>
时间： 2024-10-14 08:27:37