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. WebDriver高级应用实例（10）

    10.1控制HTML5语言实现的视频播放器 目的:能够获取html5语言实现的视频播放器视频文件的地址.时长.控制进行播放暂停 被测网页的网址: http://www.w3school.com.cn/ ...

  2. Vue2.5开发去哪儿网App 首页开发

    主页划 5 个组件,即 header  icon  swiper recommend weekend 一. header区域开发 1. 安装 stylus npm install stylus --s ...

  3. 使用.NetCore在Linux上写TCP listen 重启后无法绑定地址

    拥抱.net core的过程中, 将公司的一套java项目改成了.net core 2.0版的. 里面的tcp服务被我用msdn的SocketAsyncEventArgs方式重写了, 然而在测试的过程 ...

  4. tensorflow进阶篇-5(反向传播2)

    上面是一个简单的回归算法,下面是一个简单的二分值分类算法.从两个正态分布(N(-1,1)和N(3,1))生成100个数.所有从正态分布N(-1,1)生成的数据目标0:从正态分布N(3,1)生成的数据标 ...

  5. node mysql插入中文时报错

    一开始以为是前端传参.数据类型的问题,于是就直接把sql语句中的参数直接改成字符串值,但发现还是报500错误. 所以,这就排除了前端的问题. 剩下的就是数据库了,发现我的表设置有问题.凡是有中文数据的 ...

  6. 面试：vector类的简单实现

    vector类的简单实现 #include <vector> #include <iostream> #include <cstring> #include < ...

  7. WIN32控件使用系统样式

    定义如下即可: #ifdef _M_IX86 #pragma comment(linker,"/manifestdependency:\"type='win32' name='Mi ...

  8. Flux --> Redux --> Redux React 基础实例教程

    本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...

  9. [Node.js] 3、搭建hexo博客

      一.安装新版本的nodejs和npm 安装n模块: npm install -g n 升级node.js到最新稳定版 n stable   二.安装hexo note: 参考github,不要去其 ...

  10. UIKit 框架之UIResponder

    前面博客有讲触摸事件提过响应事件和响应者链,而管理响应者链的正是UIResponder. 一.代码 - (BOOL)application:(UIApplication *)application d ...