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. python iter函数用法

    iter函数用法简述 Python 3中关于iter(object[, sentinel)]方法有两个参数. 使用iter(object)这种形式比较常见. iter(object, sentinel ...

  2. 【LeetCode】200. 岛屿的个数

    题目 给定一个由 '1'(陆地)和 '0'(水)组成的的二维网格,计算岛屿的数量.一个岛被水包围,并且它是通过水平方向或垂直方向上相邻的陆地连接而成的.你可以假设网格的四个边均被水包围. 示例 1:输 ...

  3. POJ 2840

    #include<iostream> #include<stdio.h> #include<string> using namespace std; int mai ...

  4. github 最新项目快报

    http://www.open-open.com/github/view/github2016-10-17.html

  5. 线程中的同步辅助类CountDownLatch

    四个类可协助实现常见的专用同步语句.Semaphore 是一个经典的并发工具.CountDownLatch 是一个极其简单但又极其常用的实用工具,用于在保持给定数目的信号.事件或条件前阻塞执行.Cyc ...

  6. 企业域的冗余设计①：DHCP冗余设计（上）

    在许多企业网络中,为了方便客户端IP地址的管理,通常采用的是自动获取的方式向DHCP服务器获得IP地址.为了保证DHCP服务器能够正常稳定地向客户端提供IP地址的租赁,DHCP服务器的冗余设计就显得格 ...

  7. 转:Intellij idea Version Control File Status Colors ( 版本控制文件状态颜色 )

    https://blog.csdn.net/Bruce_Lee__/article/details/80261308 Added —— 添加 Added in not active changelis ...

  8. docker使用非root用户启动容器出现“running exec setns process for init caused \"exit status 40\"": unknown”

    环境为centos7,linux内核版本为3.10 出现该问题的原因是内核3.10的bug,升级linux内核即可,升级办法如下,升级完成后重启系统,选择对应的内核版本启动即可. .导入key rpm ...

  9. postgresql主从配置

    master:10.0.1.114 slaver:10.0.1.116 一.yum安装https://blog.csdn.net/weixin_41048363/article/details/803 ...

  10. SpringBoot入门 (十二) 定时任务

    本文记录在SpringBoot中使用定时任务. 在我们的项目中,经常需要用到定时任务去帮我们做一些事情,比如服务状态监控,业务数据状态的更改等,SpringBoot中实现定时任务有2中方案,一种是自带 ...