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. poi 读取使用 Strict Open XML 保存的 excel 文档

    poi 读取使用 Strict Open XML 保存的 excel 文档 某项目有一个功能需要读取 excel 报表内容,使用poi读取时报错: 具体错误为: org.apache.poi.POIX ...

  2. python packaging

    python packaging 一.困惑 作为一个 Python 初学者,我在包管理上感到相当疑惑(嗯,是困惑).主要表现在下面几个方面: 这几个包管理工具有什么不同? * distutils * ...

  3. Git学习系列之Windows上安装Git之后的一些配置（图文详解）

    不多说,直接上干货! 前面博客 Git学习系列之Windows上安装Git详细步骤(图文详解) 第一次使用Git时,需要对Git进行一些配置,以方便使用Git. 不过,这种配置工作只需要进行一次便可, ...

  4. php -- 文件上传下载

    ----- 026-upload.php ----- <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  5. 音频播放封装（pcm格式，Windows平台 c++）

    介绍 pcm格式是音频非压缩格式.如果要对音频文件播放,需要先转换为pcm格式. windows提供了多套函数用于播放,本文介绍Waveform Audio Functions系列函数. 原始的播放函 ...

  6. 高可用Hadoop平台－探索

    1.概述 上篇<高可用Hadoop平台-启航>博客已经让我们初步了解了Hadoop平台:接下来,我们对Hadoop做进一步的探索,一步一步的揭开Hadoop的神秘面纱.下面,我们开始赘述今 ...

  7. [Python 从入门到放弃] 4. 什么是可选参数

    参数在函数中使用,顾名思义.可选参数就是:这个参数是可选的 也就是可有可无 我们来看一下这个例子: ver 1: 1.定义一个迭代输出列表元素的函数myPrint 2.参数为 列表 def myPri ...

  8. 神经网络优化方法总结：SGD，Momentum，AdaGrad，RMSProp，Adam

    1. SGD Batch Gradient Descent 在每一轮的训练过程中,Batch Gradient Descent算法用整个训练集的数据计算cost fuction的梯度,并用该梯度对模型 ...

  9. JavaWeb 简单实现客户信息管理系统

    项目介绍 本项目使用Jsp+Servlet+MySQL实现 功能介绍 查询客户信息:查询数据库中所有客户信息,分页展示 添加客户信息:创建新客户并添加到数据库中 搜索客户信息:根据用户的输入查询客户信 ...

  10. Java中mongodb使用and和or的复合查询

    在MongoDB的JAVA查询中对应这些问题 and查询 //条件 startsAt< curr and endsAt > curr long curr = new Date().getT ...