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对象的函数
Dec 22 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
在layui中select更改后生效的方法
Sep 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
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
python使用Apriori算法进行关联性解析
2017/12/21 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
乡镇干部先进事迹材料
2014/02/03 职场文书
质量标语大全
2014/06/12 职场文书
医学专业自荐信
2014/06/14 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
js实现自动锁屏功能
2021/06/02 Javascript
MySQL约束超详解
2021/09/04 MySQL
HTML基本元素标签介绍
2022/02/28 HTML / CSS