canvas ：原生javascript编写动态时钟

 
 

此时针是以画布的中心为圆心；

g.translate(width/2,width/2);

此函数是将画布的原点移到(width/2,width/2)

绘制表盘

function jiang(){

                r = width/2

                g.clearRect(0, 0, 600, 600);

                g.save();

                g.translate(r, r);

                g.rotate(-Math.PI / 2);

              //分钟刻度线

                for(var i = 0; i < 60; i++) {//画60个刻度线

                    g.beginPath();

                    g.strokeStyle ="white";

                    g.lineWidth = 4;

                    g.moveTo(250, 0);

                    g.lineTo(240, 0);

                    g.stroke();

                    g.rotate(Math.PI / 30); //每个6deg画一个时钟刻度线

                    g.closePath();

                }

              //时钟刻度线

                for(var i = 0; i < 12; i++) {//画12个刻度线

                    g.beginPath();

                    g.strokeStyle ="white";

                    g.lineWidth = 8;

                    g.moveTo(250, 0);

                    g.lineTo(230, 0);

                    g.stroke();

                    g.rotate(Math.PI / 6); //每个30deg画一个时钟刻度

                    g.closePath();

                }

            }

时针

save和restore必不可少，在这两个函数之间，改变位置不会影响到其他函数，在此段代码中特指rotate，如果没有rotate，可以不用save和restore

一定要加beginPath，免得被其他函数影响

时针和分针秒针不一样，一个30°，还有分针的移动会影响时针的位置

时针运动的原理是画好一条线，然后旋转那条线

            function drawHour(hour,minu){

                g.save();

                g.beginPath();

                g.lineWidth = 9;

                var rad = Math.PI*2/12*hour;

                var radMinu = Math.PI*2/12/60*minu;

                g.rotate(rad + radMinu)

                g.moveTo(-10,0);

                g.lineTo(r/2,0);

                g.strokeStyle = "white";

                g.stroke();

                g.restore();

            }

分针

            function drawMinu(minu){

                g.save();

                g.beginPath();

                g.lineWidth = 6;

                var radMinu = Math.PI*2/60*minu;

                g.rotate(radMinu)

                g.moveTo(-16,0);

                g.lineTo(r-100,0);

                g.strokeStyle = "white";

                g.stroke();

                g.restore();

            }

秒针

　　　　　　　function drawSeco(seco){

                g.save();

                g.beginPath();

                g.lineWidth = 3;

                var radSeco = Math.PI*2/60*seco;

                g.rotate(radSeco)

                g.moveTo(-25,0);

                g.lineTo(r-80,0);

                g.strokeStyle = "#ff0032";

                g.stroke();

                g.restore();

            }

数字表

        function drawNumClock(){

            var data = new Date();

            var sec = data.getSeconds();

            var min = data.getMinutes();

            var hour = data.getHours();

            g.fillStyle = "white";

            g.font = "20px '楷体'";

            g.beginPath();

            g.rotate(Math.PI/2)

            g.fillText(hour,60,0);

            g.fillText(":",80,0);

            g.fillText(min,90,0);

            g.font = "20px '楷体'";

            g.fillText(sec,120,0);

        }

下面附上整体代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>时钟</title>

        <style type="text/css">

            .kuang{

                width: 600px;

                height: 600px;

                margin: auto;

                padding: 5;

            }

        </style>

    </head>

    <body>

        <div class="kuang">

        <canvas id="zhong" width="600" height="600"></canvas>

        </div>

        <script type="text/javascript">

            var canvas =document.querySelector("canvas");

            canvas.style.background ="paleturquoise";

            var g = canvas.getContext("2d");

            var width = canvas.width;

            var height = canvas.height;

                   //绘制转盘时钟

            function jiang(){

                r = width/2

                g.clearRect(0, 0, 600, 600);

                g.save();

                g.translate(r, r);

                g.rotate(-Math.PI / 2);

              //分钟刻度线

                for(var i = 0; i < 60; i++) {//画60个刻度线

                    g.beginPath();

                    g.strokeStyle ="white";

                    g.lineWidth = 4;

                    g.moveTo(250, 0);

                    g.lineTo(240, 0);

                    g.stroke();

                    g.rotate(Math.PI / 30); //每个6deg画一个时钟刻度线

                    g.closePath();

                }

              //时钟刻度线

                for(var i = 0; i < 12; i++) {//画12个刻度线

                    g.beginPath();

                    g.strokeStyle ="white";

                    g.lineWidth = 8;

                    g.moveTo(250, 0);

                    g.lineTo(230, 0);

                    g.stroke();

                    g.rotate(Math.PI / 6); //每个30deg画一个时钟刻度

                    g.closePath();

                }

            }

                /*画时针*/

            function drawHour(hour,minu){

                g.save();

                g.beginPath();

                g.lineWidth = 9;

                var rad = Math.PI*2/12*hour;

                var radMinu = Math.PI*2/12/60*minu;

                g.rotate(rad + radMinu)

                g.moveTo(-10,0);

                g.lineTo(r/2,0);

                g.strokeStyle = "white";

                g.stroke();

                g.restore();

            }

                /*画分针*/

            function drawMinu(minu){

                g.save();

                g.beginPath();

                g.lineWidth = 6;

                var radMinu = Math.PI*2/60*minu;

                g.rotate(radMinu)

                g.moveTo(-16,0);

                g.lineTo(r-100,0);

                g.strokeStyle = "white";

                g.stroke();

                g.restore();

            }

                /*画秒针*/

            function drawSeco(seco){

                g.save();

                g.beginPath();

                g.lineWidth = 3;

                var radSeco = Math.PI*2/60*seco;

                g.rotate(radSeco)

                g.moveTo(-25,0);

                g.lineTo(r-80,0);

                g.strokeStyle = "#ff0032";

                g.stroke();

                g.restore();

            }

            /*数字表*/

        function drawNumClock(){

            var data = new Date();

            var sec = data.getSeconds();

            var min = data.getMinutes();

            var hour = data.getHours();

            g.fillStyle = "white";

            g.font = "20px '楷体'";

            g.beginPath();

            g.rotate(Math.PI/2)

            g.fillText(hour,60,0);

            g.fillText(":",80,0);

            g.fillText(min,90,0);

            g.font = "20px '楷体'";

            g.fillText(sec,120,0);

        }

        function draw(){

            var data = new Date();

            var sec = data.getSeconds();

            var min = data.getMinutes();

            var hour = data.getHours();

            jiang();

            drawHour(hour,min);

            drawMinu(min);

            drawSeco(sec);

            drawNumClock()

            g.restore();

        }

        setInterval(draw,10)

        </script>

    </body>

</html>

　　

canvas ：原生javascript编写动态时钟的更多相关文章

  1. 原生 Javascript 编写五子棋

    原文地址:原生 Javascript 编写五子棋 博客地址:http://www.extlight.com 一.背景 近一个月没写 Javascript 代码,有点生疏.正好浏览网页时弹出五子棋的游戏 ...

  2. 原生JS实现动态时钟（优化）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 用原生CSS编写动态字体

    HTML部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  4. 《ASP.NET1200例》C#在网页上编写动态时钟

    包含Timer类的命名空间有3个 Timer Class (System.Threading)‎ Timer Class (System.Windows.Forms)‎ 一般用于窗体程序 Timer  ...

  5. 原生javascript模仿win8等待进度条。

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...

  6. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

  7. 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  8. JavaScript+svg绘制的一个动态时钟

    结果图: 代码如下: <!DOCTYPE html> <html> <head> <title>动态时钟</title> </head ...

  9. 使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...

随机推荐

  1. while循环中使用scanf函数

    妈的,这scanf函数学了快10年了,怎么还会出现莫名其妙的问题?看下面的代码(VS2012环境下运行): #define _CRT_SECURE_NO_WARNINGS #include<st ...

  2. 【learning】 扩展lucas定理

    首先说下啥是lucas定理: $\binom n m \equiv \binom {n\%P} {m\%P} \times \binom{n/P}{m/P} \pmod P$ 借助这个定理,求$\bi ...

  3. (转)linux top命令中各cpu占用率含义及案例分析

    原文:https://blog.csdn.net/ydyang1126/article/details/72820349 linux top命令中各cpu占用率含义 0 性能监控介绍 1 确定应用类型 ...

  4. 链表的反转、合并(不借助额外list数组)

    链表的基本操作:线性表 (单链表.循环链表-python实现) 反转链表: # -*- coding:utf-8 -*- class ListNode: def __init__(self, x): ...

  5. N元马尔科夫链的实现

    马尔可夫模型(Markov Model)是一种统计模型,广泛应用在语音识别,词性自动标注,音字转换,概率文法等各个自然语言处理等应用领域.经过长期发展,尤其是在语音识别中的成功应用,使它成为一种通用的 ...

  6. 【Canal源码分析】重要类图

    从Canal的整体架构中,我们可以看出,在Canal中,比较重要的一些领域有Parser.Sink.Store.MetaManager.CanalServer.CanalInstance.CanalC ...

  7. text_edit 未定义解决

    找到文件:admin\controller\setting $data['heading_title'] = $this->language->get('heading_title'); ...

  8. Python -- 网络编程 -- 简单抓取网页

    抓取网页: urllib.request.urlopen(url).read().decode('utf-8')  ---  (百度是utf-8,谷歌不是utf-8,也不是cp936,ascii也不行 ...

  9. C/C++求职宝典21个重点笔记（常考笔试面试点）

    这是我之前准备找工作时看<C/C++求职宝典>一书做的笔记,都是一些笔试面试中常考的重点难点问题,但比较基础,适合初学者看. 1. char c = '\72'; 中的\72代表一个字符, ...

  10. 页面打印pdf格式文件

    '<td><button type="button" class="btn btn-primary" data-loading-text=&q ...