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 相关文章推荐
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHPCMS的使用小结
2010/09/20 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
心扬JS分页函数代码
2010/09/10 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
浅谈对yield的初步理解
2017/05/29 Python
softmax及python实现过程解析
2019/09/30 Python
用Python进行websocket接口测试
2020/10/16 Python
python 对xml解析的示例
2021/02/27 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
公司出纳岗位职责
2013/12/07 职场文书
致裁判员加油稿
2014/02/08 职场文书
父亲节活动总结
2015/02/12 职场文书
经理聘任证明
2015/03/02 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
Python之matplotlib绘制折线图
2022/04/13 Python