使用canvas绘制一个时钟

来源：互联网发布：淘宝女装网店名字编辑：程序博客网时间：2024/06/05 20:08

项目分为两个文件，clock.html和clock.js，下面贴出两个源代码

clock.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" charset="UTF-8" content="width=device-width,initial-scale=1">
   <title>Clock</title>
   <style type="text/css">
       div{
           text-align: center;
           margin-top: 250px;
       }
       #clock{
           border: 1px solid #ccc
       }
   </style>
</head>
<body>
   <div>
       <canvas id="clock" height="200px" width="200px"></canvas>
       <script type="text/javascript" src="clock.js"></script>
   </div>
</body>
</html>

clock.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;

//绘制时钟的背景
function drawBackground(){
   ctx.save();
   ctx.translate(r,r);
   ctx.beginPath();
   ctx.arc(0,0,r-5,0,2*Math.PI,false);//绘制一个圆形
   ctx.lineWidth = 10;
   ctx.stroke();

   var hourNumbers = [3,4,5,6,6,8,9,10,11,12,1,2];//设置整点数字
   ctx.font = '18px Arial';//设置整点数字的字体
   ctx.textAlign = 'center';
   ctx.textBaseline = 'middle';
   hourNumbers.forEach(function(numbers,i){
       //计算圆上时钟的坐标
       var rad = 2*Math.PI / 12 *i;
       var x = Math.cos(rad)*(r-30);
       var y = Math.sin(rad)*(r-30);
       ctx.fillText(numbers,x,y);
   });
//设置小时的圆点
   for(var i=0;i<60;i++){
       var rad = 2*Math.PI / 60 *i;
       var x = Math.cos(rad)*(r-18);
       var y = Math.sin(rad)*(r-18);
       ctx.beginPath();
       //设置整点为深颜色，非整点为浅颜色，每5个循环一次
       if(i % 5 == 0){
           ctx.fillStyle = '#000';
           ctx.arc(x,y,2,0,2*Math.PI,false);
       }
       else{
           ctx.fillStyle = '#ccc';//填充的颜色
           ctx.arc(x,y,2,0,2*Math.PI,false);
       }
       ctx.fill();
   }
}

//利用canvas绘制出时针，其中save(),beginPath(),moveTo(),lineTo()都是canvas绘图工具有的函数，直接调用就可以了
//下面分针和秒针一样的，模仿即可
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';//时针的长度
       ctx.lineCap='round';//绘制时针的头顶为方形
       ctx.moveTo(0,10);
       ctx.lineTo(0,-r / 2);
       ctx.stroke();
       ctx.restore();
}
//利用canvas绘制出分针
function drawMinute(minute){
       ctx.save();
       ctx.beginPath();
       var rad = 2 * Math.PI / 60 * minute;
       ctx.rotate(rad);
       ctx.lineWidth = '3';
       ctx.lineCap='round';
       ctx.moveTo(0,10);
       ctx.lineTo(0,-r + 30);
       ctx.stroke();
       ctx.restore();
}
//利用canvas绘制出秒针
function drawSecond(second){
       ctx.save();
       ctx.beginPath();
       var rad = 2 * Math.PI / 60 * second;
       ctx.fillStyle = '#ccc';
       ctx.rotate(rad);
       ctx.moveTo(-2,20);
       ctx.lineTo(2,20);
       ctx.lineTo(1,-r + 18);
       ctx.lineTo(-1,-r + 18);
       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();
   drawHour(hour,minute);
   drawMinute(minute);
   drawSecond(second);
   drawDot();
   ctx.restore();
}
setInterval(draw,1000);//每隔1s绘制一次图形

希望有更好方法的同学联系我哈！

0 0