html5 canvas clock 时钟效果

来源：互联网发布：java定义常量的关键字编辑：程序博客网时间：2024/05/24 04:09

html：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>clock</title><style type="text/css">div{text-align:center; margin:100px auto;}</style></head><body><div><canvas id="canvas" width="600px" height="600px" style="border-radius: 50%; background:url(bg.png); background-size: cover;"></canvas></div><script type="text/javascript" src="time.js"></script></body></html>

js:

var dom = document.getElementById('canvas');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.strokeStyle = '#42ca78';ctx.lineWidth = 10 * rem;ctx.arc(0,0,r-ctx.lineWidth / 2,0,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.fillStyle = '#fff'ctx.textAlign = 'center';ctx.textBaseline = 'middle';hourNumbers.forEach(function(number,i){var rad = 2*Math.PI/12 * i;var x = Math.cos(rad) * ( r - 30 * rem);var y = Math.sin(rad) * ( r - 30 * 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 = '#f16192';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 drawHour(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,second){ctx.save();ctx.beginPath();var rad = 2*Math.PI / 60 * minute;var mrad = 2*Math.PI / 60 / 60 * second;ctx.rotate(rad + mrad);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 = '#f16192'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 * rem,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();drawHour(hour,minute);drawMinute(minute,second);drawSecond(second);drawDot();ctx.restore();}draw()setInterval(draw,1000);

效果图：

阅读全文

0 0