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

一，首先是页面的搭建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 onload="init()">

<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";

　　　if(i==0){

　　　　　　 ctx.strokeText(12,i*(-20)*Math.PI/120,-150);

　　　　}else{

　　　　　　 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);

                };

        })();

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

  1. 使用canvas绘制一个时钟

    周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...

  2. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

  3. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

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

    最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...

  5. 用HTML5的canvas做一个时钟

    对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了 ...

  6. HTML5 在canvas绘制一个矩形

    笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...

  7. Canvas绘制一个大鱼喂小鱼的游戏

    Canvas是HTML5中的一部分,强大的API足以让我们绘制我们任意想绘制的东西.利用Canvas的基础学习以及JavaScript面向对象的思想绘制一个小游戏,下面是源码地址https://git ...

  8. canvas绘制表盘时钟

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. Canvas 绘制一个像素风电子时钟

    想法是在 Canvas 上绘制由小方块组成的数字. 第一步是实现绘制小方块的方法,先画出一个边长为 5 的 10x10 个方块,使用两个 for 循环很简单就能完成. for (let i = 0; ...

随机推荐

  1. MongoDb笔记（一）

    1.Mongodb 数据库是动态生成的可以使用use 数据库名 来指定要使用的数据库,如果数据库不存在就自动生成一个 2.插入一个文档:db.foo.insert({"name": ...

  2. UINavigationController 导航控制器

    一.导航视图控制器 1.管理视图控制器 2.控制视图控制器之间的跳转 3.是以压栈和出栈的形式来管理视图控制器 4.导航视图控制器必须要设置根视图控制器 5.导航是视图控制器包含UINavigatio ...

  3. java集合--Queue用法

    队列是一种特殊的线性表,它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作.进行插入操作的端称为队尾,进行删除操作的端称为队头.队列中没有元素时,称为空队列. 在队列这 ...

  4. GSS2-Can you answer these queries II

    ---恢复内容开始--- 这道题真的是非常恶心,看题解看了半天才弄懂,而且题解上说的相当简略. 此题大意是询问去掉重复元素的最大子区间和,没有修改操作. 没有修改操作,这样就可以离线处理了. 这道题有 ...

  5. JSON 传值 textarea中虚拟换行功能

    遇到错误的袭击, 错误出现,使用jquery中ajax进行查询数据时执行完以后,需要把数据封装成为JSON类型的数据,并传递到前台去的时候出现Invalid JSON 错误,经查找后发现是在使用tex ...

  6. du与df为什么有时候会有差异

    以下仅为本人理解,非官方! du命令:统计父目录的目录项,若目录项存在,则进行查找 df命令:统计inode节点,根据inode节点存储的块大小进行统计 差异原因: 当一个文件被进程调用后,复制文件到 ...

  7. 基于C#—WPF的扫雷游戏

    自学教材:<C#入门经典(第六版)>,1月28日购入,1月29日到2月9日学习了前十六章,由于有C语言基础,在语法阶段学习起来比较轻松,不过在接触到面向对象的时候遇到了一些困难,对于一些概 ...

  8. 【Xamarin挖墙脚系列：代码手写UI，xib和StoryBoard间的博弈，以及Interface Builder的一些小技巧(转)】

    正愁如何选择构建项目中的视图呢,现在官方推荐画板 Storybord...但是好像 xib貌似更胜一筹.以前的老棒子总喜欢装吊,用代码写....用代码堆一个HTML页面不知道你们尝试过没有.等页面做出 ...

  9. code 代码分析 及其解决方案

    官网地址:http://msdn.microsoft.com/zh-cn/library/ms182135.aspx [FxCop.设计规则]11. 不应该使用默认参数 参考地址:http://blo ...

  10. 外部样式OL LI的定义 影响到了富文本框内的UL LI的定义，使用内部样式对其还原

    <style type="text/css"> #intro { white-space: normal; word-break: break-all; overflo ...