HTML5 canvas 时钟

来源：互联网发布：北京中云数据有限公司编辑：程序博客网时间：2024/05/21 12:39

HTML代码：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">.colock_div{margin-top: 10%;margin-left: 40%;/*border: 1px solid red;*/}.colock{/*background-color: blue;*//*border: 1px solid red;*/}</style></head><body><div class="colock_div"><canvas width="400" height="400"   id="clock" class="colock"></div></body><script type="text/javascript" src="js/colock.js"></script></html>

js 代码：

var dom = document.getElementById('clock');var ctx = dom.getContext("2d");var width = ctx.canvas.width;var height = ctx.canvas.height;var r = width / 2;var rem = width /200;function drawBackground() {ctx.save();ctx.translate(r,r);ctx.beginPath();ctx.lineWidth = 10*rem;ctx.arc(0,0,r-ctx.lineWidth/2,2*Math.PI,false);ctx.stroke();var hourNumbers= [3,4,5,6,7,8,9,10,11,12,1,2];ctx.font =18*rem+"px Arial";ctx.textAlign = "center";ctx.textBaseline = "middle";hourNumbers.forEach(function(number,i){var rad = 2 * Math.PI/12 * i;var x = Math.cos(rad)*(r-40*rem);var y = Math.sin(rad)*(r-40*rem);ctx.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);ctx.beginPath();if(i % 5 === 0){ctx.fillStyle = "#000";ctx.arc(x,y,2*rem,0,2*Math.PI,false);}else{ctx.fillStyle = "#ccc";ctx.arc(x,y,2*rem,0,2*Math.PI,false);}ctx.fill();}}function darwHour(hour,minute){ctx.save();ctx.beginPath();var rad = 2* Math.PI / 12 *hour;var mrad= 2* Math.PI / 12/60 *minute;ctx.rotate(rad+mrad);ctx.lineWidth = 6*rem;ctx.lineCap = "round";ctx.moveTo(0,10*rem);ctx.lineTo(0,-r/2);ctx.stroke();ctx.restore();}function drawMinute(minute){ctx.save();ctx.beginPath();var rad = 2* Math.PI /60 * minute;ctx.rotate(rad);ctx.lineWidth = 3*rem;ctx.lineCap = "round";ctx.moveTo(0,10*rem);ctx.lineTo(0,-r+30*rem);ctx.stroke();ctx.restore();}function drawSecond(second){ctx.save();ctx.beginPath();ctx.fillStyle = "#FF0000";var rad = 2* Math.PI /60 * second;ctx.rotate(rad);ctx.moveTo(-2,20*rem);ctx.lineTo(2,20*rem);ctx.lineTo(1,-r+18*rem);ctx.lineTo(-1,-r+18*rem);ctx.fill();ctx.restore();}function drawDot(){ctx.beginPath();ctx.fillStyle = "#fff";ctx.arc(0,0,3,0,2*Math.PI,false);ctx.fill();}function draw(){ctx.clearRect(0,0,width,height);var now = new Date();var hour = now.getHours();var minute = now.getMinutes();var second = now.getSeconds();drawBackground();darwHour(hour,minute);drawMinute(minute);drawSecond(second);drawDot();ctx.restore();}draw()setInterval(draw,1000);

阅读全文

0 0