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 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
Js的Array数组对象详解
Feb 22 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
js实现简单放大镜效果
Mar 07 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
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
PDO实现学生管理系统
2020/03/21 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python3简单实例计算同花的概率代码
2017/12/06 Python
Python实现的建造者模式示例
2018/08/06 Python
python requests post多层字典的方法
2018/12/27 Python
彻底理解Python中的yield关键字
2019/04/01 Python
python实现双色球随机选号
2020/01/01 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
python mock测试的示例
2020/10/19 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
大专学生推荐信范文
2013/11/19 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
技术员岗位职责范本
2015/04/11 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
MySQL快速插入一亿测试数据
2021/06/23 MySQL