canvas绘制电子时钟

来源：互联网发布：音频压缩算法编辑：程序博客网时间：2024/05/19 16:35
HTML5新增了许多实用的属性，今天带来一款用canvas绘制的电子时钟.
代码如下：
<span style="font-size:12px;"><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>canvas-时钟</title><style>*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;}body{background: #f0f0f0;}#canvas{width: 400px;height: 400px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}</style><script type="text/javascript">window.onload = function(){init();// 初始化function init(){// 页面打开时执行一次clock函数clock();// 每隔一秒执行一次clock函数setInterval(clock,1000);}function clock(){// 获取canvas画布var canvas = document.getElementById("canvas");var ctx =  canvas.getContext("2d");// 创建时间对象并获取当前系统时间var now_data = new Date();// 小时,电脑系统时间为24制,时钟为12制var hour = now_data.getHours()%12;// 分钟var min = now_data.getMinutes();// 秒var sec = now_data.getSeconds();// 准备绘制ctx.save();// 每次绘制之前应将画布清除再继续绘制ctx.clearRect(0,0,canvas.width,canvas.height);// 将中心点移动到(200,200)ctx.translate(200,200);// 绘制刻度线for(var i=1;i<=60;i++){// 整个表盘分为12份，一份代表每一小时if(i%5==0){ctx.save();ctx.beginPath();ctx.rotate(Math.PI/30);ctx.moveTo(140,0);ctx.lineTo(150,0)ctx.lineWidth = 4;ctx.stroke();ctx.closePath();ctx.restore();}// 整个表盘分为60份，一份代表每一分钟ctx.beginPath();// 每一分钟旋转6度ctx.rotate(Math.PI/30);ctx.moveTo(145,0);ctx.lineTo(150,0);ctx.stroke();ctx.closePath();}// 绘制秒针ctx.save()ctx.beginPath();// 获取当前系统时间再进行旋转,// 秒针旋转角度为当前获取的秒数*6度ctx.rotate(sec*Math.PI/30);ctx.moveTo(0,20);ctx.lineTo(0,-138);ctx.lineWidth=1;ctx.stroke();ctx.closePath();ctx.restore();// 绘制分针ctx.save();ctx.beginPath();// 分针旋转的角度为当前分钟数*6度+当前秒针数*(6度/60)// 秒针走60下，分针走一下ctx.rotate(min*Math.PI/30+ sec*(Math.PI/30/60));ctx.moveTo(0,20);ctx.lineTo(0,-130);ctx.lineWidth = 2;ctx.stroke();ctx.closePath();ctx.restore();// 时针ctx.save();ctx.beginPath();// 时针旋转角度为当前小时数*30度+当前分钟数*(0.5度)+当前秒针数*(0.5/60度)// hour*(Math.PI/6):每过一个小时，应该旋转30度// min*(Math.PI/6/60):分针走60下，时针动一下// sec*(Math.PI/6/60/60):秒针走3600下，时钟动一下ctx.rotate(hour*(Math.PI/6)+min*(Math.PI/6/60)+sec*(Math.PI/6/60/60));ctx.moveTo(0,10);ctx.lineTo(0,-120);ctx.lineWidth = 3;ctx.stroke();ctx.closePath();ctx.restore();// 开始绘制外面的圆ctx.beginPath();ctx.arc(0,0,150,0,Math.PI*2,false);ctx.stroke();ctx.closePath();ctx.restore();}}</script></head><body><canvas id="canvas" width="400" height="400"></canvas></body></html></span>
0 0