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+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
生成二维码方法汇总
Dec 26 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
js实现无缝轮播图
Mar 09 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
php短址转换实现方法
2015/02/25 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
轮播的简单实现方法
2016/07/28 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python实现的石头剪子布代码分享
2014/08/22 Python
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
简单介绍Python中的round()方法
2015/05/15 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
python实现推箱子游戏
2020/03/25 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
行政助理岗位职责范文
2013/12/03 职场文书
就业表自我评价分享
2014/02/06 职场文书
企业宣传工作方案
2014/06/02 职场文书
不错的求职信范文
2014/07/20 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers