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中的循环语句for语句深入理解
Apr 04 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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动态实现表格跨行跨列实现代码
2012/11/06 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
jquery ajax执行后台方法
2010/03/18 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
vscode调试node.js的实现方法
2020/03/22 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
python实现识别相似图片小结
2016/02/22 Python
深入理解Django中内置的用户认证
2017/10/06 Python
python3实现名片管理系统
2020/11/29 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
python字典的常用方法总结
2019/07/31 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
房地产财务管理制度
2014/02/02 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
欢迎新生标语2015
2015/07/16 职场文书
乔迁新居祝福语
2019/11/04 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS