html 代码
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>canvas 绘制钟表 </title>
- <style type="text/CSS">
- #canvas1{
- /*border: 3px solid red;*/
- margin: 0 auto;
- display: block;
- }
- </style>
- </head>
- <body>
- <canvas id="canvas1" width="600" height="600"></canvas>
- </body>
- <script type="text/JavaScript">
- var canvas = document.getElementById("canvas1");
- var context = canvas.getContext("2d");
- var yuanShiWidth = canvas.width * 0.5;//X 轴
- var yuanShiHeight = canvas.height * 0.5;//Y 轴
- context.translate(yuanShiWidth,yuanShiHeight);
- context.rotate(-Math.PI / 2);// 逆时针旋转 90 度
- function dralDial () {
- context.beginPath();
- context.arc(0,0,yuanShiWidth,0,Math.PI * 2,false);
- context.fillStyle = "deepskyblue";
- context.fill();
- context.beginPath();
- context.arc(0,0,280,0,Math.PI * 2,false);
- context.lineWidth = 10;
- context.fillStyle = "ivory";
- context.fill();
- }
- function drawScale () {
- for (var i = 0; i <60; i++) {
- if (i % 5 == 0) {
- context.beginPath();
- context.moveTo(238,0);
- context.lineTo(270,0);
- context.strokeStyle = "black";
- context.stroke();
- } else{
- context.beginPath();
- context.moveTo(245,0);
- context.lineTo(270,0);
- context.lineWidth = 5;
- context.strokeStyle = "orchid";
- context.stroke();
- }
- context.rotate(Math.PI / 180 * 6);
- }
- }
- var yiDu = Math.PI / 180;
- function drawTime () {
- var time = new Date();
- var hour = time.getHours();
- var minute = time.getMinutes();
- var second = time.getSeconds();
- context.save();
- context.rotate(yiDu * 30 * hour + yiDu * minute / 60 * 30);
- context.beginPath();
- context.moveTo(-20,0);
- context.lineTo(180,0);
- context.lineWidth = 13;
- context.strokeStyle = "#FFA500"
- context.stroke();
- context.restore();
- context.save();
- context.rotate(yiDu * 6 * minute + yiDu * second / 60 * 6);
- context.beginPath();
- context.moveTo(-30,0);
- context.lineTo(210,0);
- context.lineWidth = 10;
- context.strokeStyle = "#FFA500";
- context.stroke();
- context.restore();
- context.save();
- context.rotate(yiDu * 6 * second);context.beginPath();
- context.moveTo(-40,0);
- context.lineTo(235,0);
- context.lineWidth = 8;
- context.strokeStyle = "red";
- context.stroke();
- context.restore();
- context.beginPath();
- context.arc(0,0,15,0,Math.PI * 2,false);
- context.fillStyle = "rgba(80,100,200,0.5)";
- context.fill()
- }
- function drawClock () {
- dralDial();
- drawScale();
- drawTime();
- Windows.requestAnimationFrame(drawClock);
- }
- drawClock();
- </script>
- </HTML>
来源: http://www.qdfuns.com/article/33609/065d7d122a6975534de14df20dd11fd5.html