canvas绘制钟表
html:
<body>
<canvas width="1200" height="500" id="canvans"></canvas>
</body>
css
<style type="text/css"> canvas { background-color: lavender; margin-left: 60px; } </style>
js
<script type="text/javascript"> function draw() { var can = document.getElementById("canvans"); var pen = can.getContext("2d"); pen.clearRect(0, 0, can.width, can.height); /*钟表阴影*/ pen.shadowOffsetX = 10; pen.shadowOffsetY = 10; pen.shadowBlur = 14; pen.shadowColor = "rgba(0,0,0,0.5)"; /*画出钟表外框*/ pen.save(); pen.beginPath(); pen.lineWidth = 11; pen.strokeStyle = "#363636"; pen.arc(600, 250, 150, 0, Math.PI * 2, true); pen.stroke(); pen.fillStyle = "rgba(255, 240, 245,0.8)"; pen.fill(); pen.closePath(); pen.restore(); /*画出小时刻度*/ pen.lineWidth = 3; pen.strokeStyle = "rgba(0,0,0,0.8)"; for (var i = 0; i < 12; i++) { pen.save(); pen.beginPath(); pen.translate(600, 250); pen.rotate(Math.PI * 30 * i / 180); pen.lineWidth = 3; pen.moveTo(0, -130); pen.lineTo(0, -150); pen.stroke(); pen.closePath(); pen.restore(); } /*画出分针刻度*/ pen.lineWidth = 1; for (var i = 0; i < 60; i++) { pen.save(); pen.beginPath(); pen.translate(600, 250); pen.rotate(Math.PI * 6 * i / 180); pen.moveTo(0, -150); pen.lineTo(0, -140); pen.stroke(); pen.restore(); } /*数字*/ for (var i = 1; i <= 12; i++) { pen.save(); pen.beginPath(); pen.fillStyle = "black"; pen.font = "14px Arial"; pen.translate(600, 250); var clockRadius = 167; var theta = (i - 3) * (Math.PI * 2) / 12; var x = clockRadius * 0.7 * Math.cos(theta); var y = clockRadius * 0.7 * Math.sin(theta); pen.fillText(i, x - 5, y + 5); pen.closePath(); pen.restore(); } /*画出钟表中心的点*/ pen.beginPath(); pen.save(); pen.lineWidth = 1; pen.translate(600, 250); pen.fillStyle = "rgba(0,0,0,0.8)"; pen.arc(0, 0, 5, 0, Math.PI * 2, true); pen.fill(); pen.closePath(); pen.restore(); /*获取当前时间*/ var time = new Date(); var hour = time.getHours(); var min = time.getMinutes(); var sec = time.getSeconds(); /*秒针转动*/ pen.save(); pen.beginPath(); pen.translate(600, 250); pen.rotate(Math.PI * 6 * sec / 180); pen.lineWidth = 2; pen.moveTo(0, 0); pen.lineTo(0, -110); pen.stroke(); pen.closePath(); pen.restore(); /*秒针修饰*/ pen.save(); pen.beginPath(); pen.translate(600, 250); pen.rotate(Math.PI * 6 * sec / 180); pen.lineWidth = 2; pen.arc(0, -90, 3, 0, Math.PI * 2, true); pen.stroke(); pen.fillStyle = "rgba(255, 240, 245,0.8)"; pen.fill(); pen.closePath(); pen.restore(); /*分针转动*/ pen.save(); pen.beginPath(); pen.translate(600, 250); pen.rotate(Math.PI * 6 * min / 180); pen.lineWidth = 3; pen.moveTo(0, 0); pen.lineTo(0, -90); pen.stroke(); pen.closePath(); pen.restore(); /*时针转动*/ pen.save(); pen.beginPath(); pen.translate(600, 250); pen.rotate(Math.PI * 30 * hour / 180); pen.lineWidth = 5; pen.moveTo(0, 0); pen.lineTo(0, -60); pen.stroke(); pen.closePath(); pen.restore(); window.requestAnimationFrame(draw); } window.onload = function() { draw(); }; </script>
