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类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
js实现文字截断功能
Sep 14 Javascript
jQuery插件之validation插件
Mar 29 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
vue-cli3全面配置详解
Nov 14 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数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
Python之时间和日期使用小结
2019/02/14 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
物流仓储实习自我鉴定
2013/09/25 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
平安建设汇报材料
2014/12/29 职场文书
实习工作表现评语
2014/12/31 职场文书
高三复习计划
2015/01/19 职场文书
童年读书笔记
2015/06/26 职场文书
培根随笔读书笔记
2015/07/01 职场文书
2016情人节宣传语
2015/07/14 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书