用Canvas模拟了webQQ里头的那个钟。下图左侧是webQQ的原版，右侧是画出来的。效果预览

画的过程中都还比较顺利，只是最里边的那个小圆顶部有一点点小渐变，花了不少功夫 。

用得比较多的是旋转部分的代码，得先存之前的位置，然后再旋转，再恢复到原来的属性继续往下画。

HTML部分：

<!DOCTYPE HTML><html><head><meta chaset="utf-8" /><title>Canvas Clock</title><style>        a{color:#333;margin:0 10px;font-size:24px;}        .ts{width:850px;text-align:center; height:100px;position:absolute;left:50%;top:50%;margin-top:-55px;margin-left:-405px;border:1px dotted #778855;background:#F5F5F5;padding:10px;}</style></head><body></body></html>

JS部分：

(function(){/*                    Author:Jin.dh                    Date:2012/3/5*/function isIE(){    var userAgent = navigator.userAgent; var isOpera = userAgent.indexOf("Opera") > -1; var IE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera ;     return IE;                    };

var box = {                    w:150,                    h:150,                    b:"#ccc"                };

var clockAttr ={                        x:75,                        r:75,                        y:75                };

//创建容器                function $C(tag,father){var o = document.createElement(tag||"div");                    father = father || document.body;                    father.appendChild(o);return o;                };

//计时器                var autoId = null;//初始化                function init(){if(isIE()){var tsHTML = "<div class='ts'><h1 style='color:#f00'>您的浏览器暂不支持本Demo，请换成下面的浏览器试试：</h1>";                            tsHTML+="  <a href='http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html' target='_blank'>chrome</a><a href='http://www.firefox.com.cn/download/' target='blank'>firefox</a><a href='http://www.opera.com/' target='_blank'>opera</a><a href='http://www.apple.com.cn/safari/' target='_blank'>safari</a></div>";                        document.body.innerHTML = tsHTML;return false;

                    };                    canvas = $C("canvas");                    canvas.width = box.w;                    canvas.height = box.h;                    ctx = canvas.getContext("2d");                        go();//开始                };

function go(){                    autoId = setTimeout(function(){                        drew();                        go();                    },1000);                }

//画钟                    function drew(){                    ctx.clearRect(0,0,box.w,box.h)var now = new Date();var h = now.getHours();var m = now.getMinutes();var s = now.getSeconds();var rGrd =ctx.createRadialGradient(clockAttr.r, clockAttr.r, clockAttr.r-20, clockAttr.r, clockAttr.r, clockAttr.r); //创建线形渐变                     rGrd.addColorStop(1, '#343537');  //最外边的颜色                    rGrd.addColorStop(0.2,'#424242'); //靠近内层颜色                    rGrd.addColorStop(0, '#fff');        //内圆                    ctx.beginPath();                    ctx.arc(clockAttr.x,clockAttr.y,clockAttr.r,0,Math.PI*2,true);                    ctx.fillStyle = rGrd;                    ctx.fill();                    ctx.closePath();

                    ctx.save();//存Canvas原坐标                    ctx.translate(clockAttr.r,clockAttr.r);//移动坐标

                    ctx.strokeStyle = "#ccc";for(var i =0;i<12;i++){                        ctx.beginPath();                         ctx.moveTo(0,-clockAttr.r+20); //始点                        ctx.lineTo(0,-clockAttr.r+26); //终点                        ctx.lineWidth = 1;                //线宽                        if(i%3===0){                   //如果是3/6/9/12则加粗线条,颜色加深                            ctx.strokeStyle = "#333";                            ctx.lineWidth = 2;                        };                        ctx.stroke();                        ctx.closePath();                        ctx.rotate(360/12*Math.PI/180); //旋转画布                    };                    ctx.restore();

//时针                    ctx.save();//存Canvas原坐标                    ctx.translate(clockAttr.r,clockAttr.r);//移动坐标                    ctx.lineWidth = 8;//Math.PI/180为弧度算法.请参考数学“弧度”算法。                    ctx.rotate((h*60+m)*(360/(12*60))*Math.PI/180); //弧度=当前分 * 每分多少度                    ctx.beginPath();                    ctx.moveTo(0,0);                    ctx.lineTo(0,-30);                    ctx.stroke();                    ctx.closePath();                    ctx.restore();

//分针                    ctx.save();//存Canvas原坐标                    ctx.translate(clockAttr.r,clockAttr.r);//移动坐标                    ctx.rotate((m*60+s)*(360/(60*60))*Math.PI/180); //弧度=当前秒 * 每秒多少度                     ctx.fillStyle = "#000";                    ctx.beginPath();                    ctx.moveTo(0,0);                    ctx.lineTo(0,-42);                    ctx.lineWidth = 5;                    ctx.stroke();                    ctx.closePath();                    ctx.restore();

//秒针                    ctx.save();//存Canvas原坐标                    ctx.translate(clockAttr.r,clockAttr.r);//移动坐标                    ctx.lineWidth = 3;                    ctx.rotate(s*(360/60)*Math.PI/180);//弧度=当前秒 * 每秒多少度                     ctx.beginPath();                    ctx.moveTo(0,0);                    ctx.lineTo(0,-45);                    ctx.stroke();                    ctx.closePath();                    ctx.restore();

//中心圆点                    ctx.beginPath();                    ctx.arc(clockAttr.x,clockAttr.y,10,0,2*Math.PI,true);                    ctx.fillStyle = "#424242";                    ctx.fill();                    ctx.closePath();

                    ctx.beginPath();            var linear = ctx.createLinearGradient(clockAttr.x-10,clockAttr.y-10,clockAttr.x-10,clockAttr.y-8);                        linear.addColorStop(0,"#ffffff");                                                linear.addColorStop(1,"#424242");                        ctx.arc(clockAttr.x,clockAttr.y,10,0,2*Math.PI,true);                    ctx.fillStyle = linear;                    ctx.fill();                    ctx.closePath();                };

//window onlaod                function addLoad(fn){var old = window.onload;if(typeof old == "function"){                        window.onload = function(){                            fn();                            old();                        }                    }else{                        window.onload = fn;                    }                };

                    addLoad(init);//初始化                })();


转载于:https://www.cnblogs.com/webstarting/archive/2012/03/05/2380540.html

Canvas画钟 js相关推荐

  1. 用canvas画钟，实时变化的钟

    先上代码,详解之后补上 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...

  2. 用php语句绘制圆锥,JS、canvas画一个圆锥实现代码

    本文主要给大家讲解html中用canvas函数配合JS画出一个圆锥形的图形实例,有需要的朋友学习测试下吧,希望能帮帮助到大家. 以下是我们给大家分享是实例代码: 我的第一个 HTML 页面 const ...

  3. 用php语句绘制圆锥,JS+canvas画一个圆锥实例代码_javascript技巧

    本篇文章给大家讲解html中用canvas函数配合JS画出一个圆锥形的图形实例,canvas是html5中新增加的新属性,对HTML5中的canvas感兴趣的朋友学习测试下吧. 以下是我们给大家分享是 ...

  4. 【学习随记】原生js canvas 画海报

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 实现js动态创建img并使用canvas画线连接

    实现js动态创建img,使用canvas画线连接img,当背景图更换时,重新绘制img及连接线. 前台页面 @{     Layout = null; } <!DOCTYPE html> ...

  6. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  7. 关于星空的java小程序_[Java教程]小程序使用Canvas画饼图_星空网

    小程序使用Canvas画饼图 2018-10-24 0 先上效果图 -------------------------------------------------------------w --- ...

  8. canvas笔记-使用canvas画圆及点阵的使用

    如下例子: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...

  9. HTML5 Canvas 画虚线组件

    前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...

最新文章

  1. Visual Studio 2013编译Mozilla NPAPI 示例注意事项
  2. Java 调用 C++ （Java 调用 dll）康哥手把手教你
  3. php 日志处理工具 SeasLog 的使用
  4. 【代码规范】prettier
  5. svn在commit后报错：is scheduled for addition, but is missing
  6. 【视频课】一课彻底掌握深度学习图像分类各种问题，学习CV你值得拥有
  7. 六大Web负载均衡原理与实现
  8. Android应用开发实例篇（1）-----简易涂鸦板
  9. CentOS网络设置 couldn‘t resolve host ‘mirrorlist.centos.org问题解决
  10. 多线程程序中操作的原子性--转帖
  11. oracle get wkt,Bing Maps开发扩展：Oracle Spatial的空间数据渲染
  12. .NET(C#)：觉察XML反序列化中的未知节点
  13. Scala深入浅出实战初级入门经典视频课程
  14. 微信小程序之倒计时插件 wxTimer
  15. Unity3D 场景中图片模糊问题
  16. 上传文件资料并生成缩略图
  17. java合并word_java实现合并多个word文档 且可换页 实例代码（基于docx4j）
  18. 非常实用的开发小工具
  19. 思考者的回归--转帖今何在的优美文章《窗》之三
  20. IP-guard功能详解——屏幕监控

热门文章

  1. 伯德图 matlab,Matlab/Simulink中bode图的画法
  2. java 抽象方法 大括号_为什么Java抽象类的方法必须加大括号？我写错了吗？
  3. 如何创建 ESXi 安装程序 USB 闪存驱动器
  4. 计算机网络脆弱性评估技术研究
  5. 1658页！又一份神级的Java手册面世
  6. LeetCode 1658. 将 x 减到 0 的最小操作数
  7. 网易邮箱登录页面html5布局,css实现tab效果仿163邮箱样式
  8. 深入理解Oracle中的case when then else end
  9. UIQ的CEikEdwin文本框怎么设置自动滚动（转）
  10. 今年诺贝尔奖得主居然把这事研究清楚了：学历和收入到底有多大关系？