用canvas绘制一个时钟

实现一个时钟的绘制和时间的显示

一，首先是页面的搭建html部分以及一点点的css代码，因为css这块用的比较少，所以就没有单独出来：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }

　　//显示时间画布
        #cav01{
            width:600px;
            height:150px;
            margin:auto;
        }

//时钟画布
        #cav02{
            width:420px;
            height:420px;
            margin:auto;
        }
    </style>
</head>
<body >
<div id="cav01">
    <canvas id="canvas01" width="600" height="100" margin=auto></canvas>
</div>
<div id="cav02">
    <canvas id="canvas" width="390" height="390" margin=auto></canvas>
</div>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/requestAnimFrame.js"></script>    
</body>
</html>

二，绘制时钟的js部分：

这里需要用到两个js文件

1，时钟js：

var can01;
var ctx01;
var can;
var ctx;

function init(){
    can01=document.getElementById(‘canvas01‘);
    ctx01=can01.getContext("2d");
    can=document.getElementById(‘canvas‘);
    ctx=can.getContext("2d");
    time();
    run();
}

//时间
function time(){
    window.requestAnimFrame(time);
    ctx01.clearRect(0,0,600,100); //清除上次的绘画 放在每次绘画之前
    shuaxin();
}

//循环调用run
function run(){
    window.requestAnimFrame(run);
    drawbiaopan();
    drawkedu();
    biaozhen();
}

//画表盘
function drawbiaopan(){
    //arc(x,y,r,sAngle,eAngle,counterclockwise)
    //x,y圆的中心坐标，r圆的半径，sAngle,eAngle圆的起始终点，
    //counterclockwise可选，表示画圆逆时针还是顺时针False为顺时针，true为逆时针
    ctx.clearRect(20,20,390,390);
    ctx.beginPath();
    ctx.arc(200,200,180,0,2*Math.PI,false);
    ctx.lineWidth=5;
    ctx.strokeStyle="微软雅黑";
    ctx.stroke();
    ctx.closePath();
}

//画刻度盘
function drawkedu(){
    //时钟
    for(var i=0;i<12;i++)
    {
        ctx.save();
        ctx.translate(200,200);
        ctx.lineWidth=2;
        ctx.strokeStyle="green";
        ctx.rotate(i*30*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,-165);
        ctx.lineTo(0,-180);
        ctx.font="100 14px 宋体";
        ctx.textAlign="left";
        ctx.textBaseLine="top";
        ctx.strokeText(i,i*(-20)*Math.PI/120,-150);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
    //分钟
    for(var i=0;i<60;i++)
    {
        ctx.save();
        ctx.translate(200,200);
        ctx.lineWidth=1;
        ctx.strokeStyle="green";
        ctx.rotate(i*6*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,-170);
        ctx.lineTo(0,-180);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
}

//画表针
function biaozhen(){
    var now=new Date();
    var sec=now.getSeconds();
    var mins=now.getMinutes();
    var hours=now.getHours();
    hours=hours+mins/60+sec/3600;
    mins=mins+sec/60;

//时针
    ctx.save();
    ctx.translate(200,200);
    ctx.lineWidth=3;
    ctx.strokeStyle="grey";
    ctx.rotate(hours*30*Math.PI/180);
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(0,-70);//圆心起点
    ctx.stroke();
    ctx.closePath();
    ctx.restore();

//分针
    ctx.save();
    ctx.translate(200,200);
    ctx.lineWidth=2;
    ctx.strokeStyle="#000";
    ctx.rotate(mins*6*Math.PI/180);
    ctx.beginPath();
    ctx.moveTo(0,0);//起点坐标
    ctx.lineTo(0,-105);//终点坐标
    ctx.stroke();
    ctx.closePath();
    ctx.restore();

//秒针
    ctx.save();
    ctx.translate(200,200);
    ctx.lineWidth=1;
    ctx.strokeStyle="red";
    ctx.rotate(sec*6*Math.PI/180);
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(0,-130);//圆心起点
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

function shuaxin(){
    var now=new Date();
    var sec=now.getSeconds();
    var mins=now.getMinutes();
    var hours=now.getHours();
    ctx01.save();
    ctx01.beginPath();
    ctx01.fillStyle="red";
    ctx01.strokeStyle="red"
    ctx01.font="bold 40px 微软雅黑";

//清除上次的时间

//这块代码有点冗余，但是还没有想到有什么好的处理办法，以后再改吧

if(hours<10){
        if(mins<10){
            if(sec<10){
                //hours<10&&mins<10&&sec<10
                ctx01.strokeText(‘本地时间：‘+‘0‘+hours+‘:‘+‘0‘+mins+‘:‘+‘0‘+sec,100,80);
                ctx01.fillText(‘本地时间：‘+‘0‘+hours+‘:‘+‘0‘+mins+‘:‘+‘0‘+sec,100,80);
            }else{
                //hours<10&&mins<10&&sec>10
                ctx01.strokeText(‘本地时间：‘+‘0‘+hours+‘:‘+‘0‘+mins+‘:‘+sec,100,80);
                ctx01.fillText(‘本地时间：‘+‘0‘+hours+‘:‘+‘0‘+mins+‘:‘+sec,100,80);
            }
        }else{
            //hours<10&&mins>10&&sec<10
            if(sec<10){
                ctx01.strokeText(‘本地时间：‘+‘0‘+hours+‘:‘+mins+‘:‘+‘0‘+sec,100,80);
                ctx01.fillText(‘本地时间：‘+‘0‘+hours+‘:‘+mins+‘:‘+‘0‘+sec,100,80);
            }else{
                //hours<10&&mins>10&&sec>10
                ctx01.strokeText(‘本地时间：‘+‘0‘+hours+‘:‘+mins+‘:‘+sec,100,80);
                ctx01.fillText(‘本地时间：‘+‘0‘+hours+‘:‘+mins+‘:‘+sec,100,80);
            }
        }
    }
    else{
        if(mins<10){
            if(sec<10){
                //hours>10&&mins<10&&sec<10
                ctx01.strokeText(‘本地时间：‘+hours+‘:‘+‘0‘+mins+‘:‘+‘0‘+sec,100,80);
                ctx01.fillText(‘本地时间：‘+hours+‘:‘+‘0‘+mins+‘:‘+‘0‘+sec,100,80);
            }else{
                //hours>10&&mins<10&&sec>10
                ctx01.strokeText(‘本地时间：‘+hours+‘:‘+‘0‘+mins+‘:‘+sec,100,80);
                ctx01.fillText(‘本地时间：‘+hours+‘:‘+‘0‘+mins+‘:‘+sec,100,80);
            }
        }else{
            if(sec<10){
                //hours>10&&mins>10&&sec<10
                ctx01.strokeText(‘本地时间：‘+hours+‘:‘+mins+‘:‘+‘0‘+sec,100,80);
                ctx01.fillText(‘本地时间：‘+hours+‘:‘+mins+‘:‘+‘0‘+sec,100,80);
            }else{
                //hours>10&&mins>10&&sec>10
                ctx01.strokeText(‘本地时间：‘+hours+‘:‘+mins+‘:‘+sec,100,80);
                ctx01.fillText(‘本地时间：‘+hours+‘:‘+mins+‘:‘+sec,100,80);
            }
        }
    }
    ctx01.closePath();
    ctx01.restore();
}
2，做过兼容的requestAnimitionFrame循环函数

window.requestAnimFrame = (function() {  
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||  
                function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {  
                    return window.setTimeout(callback, 1000 / 60);  
                };  
        })();

时间： 2024-11-03 21:00:10

用canvas绘制一个时钟的相关文章

用canvas绘制一个简易时钟

在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数字三部分. 2.表盘是个圆,这个简单. 3.绘制指针时,需要先获取到系统时间,然后找到时间和角度的关系. 4.然后利用画圆函数,把起始和终点设为同一角度,即可画出射线(指针).  二. 接下来,我们再分析一下,绘制时钟需要用到的函数. 1.arc(x, y, r, start, stop) x, y

HTML5 Canvas绘制实时时钟

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>try to draw the colock</title> <script src="js/modernizr-1.7.js"></script> <script type="text/javascript"> wind

玩转html5（四）----使用canvas画一个时钟（可以动的哦！）

先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <html> <body> <canvas width="500" height="500" id="clock" > 您的浏览器不支持canvas </canvas> <script> //获取画布

通过HTML5标签canvas绘制一个八卦图案

只需要用到casvas标签和fillStyle.arc.beginPath.closePath.fill方法 代码如下: <canvas id="rect" width="310" height="310" style="border:1px yellow solid;"> </canvas> <script> var id=document.getElementById("rec

h5+canvas绘制动画时钟

h5+canvas绘制动画时钟 效果图,这个是截图,可以动的, 代码如下: <!DOCTYPE html><html><head><title>动画效果</title></head> <body> <canvas id="anm" width="600" height="600" style="border:1px solid gray"

通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助

最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去.接下来我将和你们分享如何制作这个时钟. 在body中添加canvas标签: <canvas id="myCanvas" width="600px" height="600px" style="border:1px solid #c3c

利用canvas制作一个时钟

先上张效果图. 利用canvas来画出一个时钟,想想都是一件神奇又美妙的事情.话不多说,先上代码吧. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-sca

应用canvas绘制动态时钟--每秒自动动态更新时间

使用canvas绘制时钟 下文是部分代码,完整代码参照:https://github.com/lemoncool/canvas-clock,可直接下载. 首先看一下效果图:每隔一秒会动态更新时间 一.前期准备 1. HTML中准备一个容器存放画布,并为其设置width,height. <div> <canvas id="clock" height="200px" width="200px"></canvas>

使用canvas绘制动画时钟

一代码 <!DOCTYPE html > <head> <meta charset="UTF-8" > <title>绘制动态时钟</title> <script type="text/javascript"> var canvas; var context; function window_onload() { canvas = document.getElementById("ca