javascript结合Canvas 实现简易的圆形时钟


Posted in Javascript onMarch 11, 2015

之前学习了下html5中的canvas元素,为了练练手就实现了一个简易的时钟。时钟本身并不复杂,也没有使用图片进行美化,不过麻雀虽小五脏俱全,下面就与大家分享一下:

演示效果:

javascript结合Canvas 实现简易的圆形时钟

html代码:

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Clock</title>

    <style type="text/css">

    *{

        margin: 0;

        padding: 0;

    }

    .canvas{

        margin-left: 20px;

        margin-top: 20px;

        border: solid 1px;

    }

    </style>

</head>

<body onload= "main()">

<canvas class = "canvas" id="canvasId" width = '500px' height = '400px'></canvas>

<script type= "text/javascript" src = "Clock.js"></script>

</body>

</html>

JS代码:

var Canvas = {};

Canvas.cxt = document.getElementById('canvasId').getContext('2d');

Canvas.Point = function(x, y){

    this.x = x;

    this.y = y;

};

/*擦除canvas上的所有图形*/

Canvas.clearCxt = function(){

    var me = this;

    var canvas = me.cxt.canvas;

       me.cxt.clearRect(0,0, canvas.offsetWidth, canvas.offsetHeight);

};

/*时钟*/

Canvas.Clock = function(){

    var me = Canvas,

        c = me.cxt,

        radius = 150, /*半径*/

        scale = 20, /*刻度长度*/

        minangle = (1/30)*Math.PI, /*一分钟的弧度*/

        hourangle = (1/6)*Math.PI, /*一小时的弧度*/

        hourHandLength = radius/2, /*时针长度*/

        minHandLength = radius/3*2, /*分针长度*/

        secHandLength = radius/10*9, /*秒针长度*/

        center = new me.Point(c.canvas.width/2, c.canvas.height/2); /*圆心*/

    /*绘制圆心(表盘中心)*/

    function drawCenter(){

        c.save();

        c.translate(center.x, center.y); 

        c.fillStyle = 'black';

        c.beginPath();

        c.arc(0, 0, radius/20, 0, 2*Math.PI);

        c.closePath();

        c.fill();

        c.stroke();

        c.restore();

    };

    /*通过坐标变换绘制表盘*/

    function drawBackGround(){

        c.save();

        c.translate(center.x, center.y); /*平移变换*/

        /*绘制刻度*/

        function drawScale(){

           c.moveTo(radius - scale, 0);

           c.lineTo(radius, 0); 

        };

        c.beginPath();

        c.arc(0, 0, radius, 0, 2*Math.PI, true);

        c.closePath();

        for (var i = 1; i <= 12; i++) {

           drawScale();

           c.rotate(hourangle); /*旋转变换*/

        };

        /*绘制时间(3,6,9,12)*/

        c.font = " bold 30px impack"

        c.fillText("3", 110, 10);

        c.fillText("6", -7, 120);

        c.fillText("9", -120, 10);

        c.fillText("12", -16, -100);

        c.stroke();

        c.restore();

    };

    /*绘制时针(h: 当前时(24小时制))*/

    this.drawHourHand = function(h){

        h = h === 0? 24: h;

        c.save();

        c.translate(center.x, center.y); 

        c.rotate(3/2*Math.PI);

        c.rotate(h*hourangle);

        c.beginPath();

        c.moveTo(0, 0);

        c.lineTo(hourHandLength, 0);

        c.stroke();

        c.restore();

    };

    /*绘制分针(m: 当前分)*/

    this.drawMinHand = function(m){

        m = m === 0? 60: m;

        c.save();

        c.translate(center.x, center.y); 

        c.rotate(3/2*Math.PI);

        c.rotate(m*minangle);

        c.beginPath();

        c.moveTo(0, 0);

        c.lineTo(minHandLength, 0);

        c.stroke();

        c.restore();

    };

    /*绘制秒针(s:当前秒)*/

    this.drawSecHand = function(s){

        s = s === 0? 60: s;

        c.save();

        c.translate(center.x, center.y); 

        c.rotate(3/2*Math.PI);

        c.rotate(s*minangle);

        c.beginPath();

        c.moveTo(0, 0);

        c.lineTo(secHandLength, 0);

        c.stroke();

        c.restore();

    };

    /*依据本机时间绘制时钟*/

    this.drawClock = function(){

        var me = this;

        function draw(){

           var date = new Date();

           Canvas.clearCxt();

           drawBackGround();

           drawCenter();

           me.drawHourHand(date.getHours() + date.getMinutes()/60);

           me.drawMinHand(date.getMinutes() + date.getSeconds()/60);

           me.drawSecHand(date.getSeconds());

        }

        draw();

        setInterval(draw, 1000);

    };  

};

 var main = function(){

    var clock = new Canvas.Clock();

    clock.drawClock();

};

代码中涉及到了一些简单的canvas元素API 大家度娘一下即可

以上就是本文的全部内容了,希望对大家学习canvas能够有所帮助。

Javascript 相关文章推荐
JavaScript confirm选择判断
Oct 18 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
Js面试算法详解
Apr 08 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
js实现随机圆与矩形功能
Oct 29 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 #Javascript
javascript与css3动画结合使用小结
Mar 11 #Javascript
jquery实现textarea 高度自适应
Mar 11 #Javascript
jQuery简单实现禁用右键菜单
Mar 10 #Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 #Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 #Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 #Javascript
You might like
长波有什么东西
2021/03/01 无线电
php 启动时报错的简单解决方法
2014/01/27 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python出现segfault错误解决方法
2016/04/16 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
详解Python字符串切片
2019/05/20 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
python中uuid模块实例浅析
2020/12/29 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
通用C#笔试题附答案
2016/11/26 面试题
大学社团活动总结
2014/04/26 职场文书
班级口号大全
2014/06/09 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL