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编写动态时钟的更多相关文章

原生 Javascript 编写五子棋
原文地址:原生 Javascript 编写五子棋博客地址:http://www.extlight.com 一.背景近一个月没写 Javascript 代码,有点生疏.正好浏览网页时弹出五子棋的游戏 ...
原生JS实现动态时钟（优化）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
用原生CSS编写动态字体
HTML部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
《ASP.NET1200例》C#在网页上编写动态时钟
包含Timer类的命名空间有3个 Timer Class (System.Threading)‎ Timer Class (System.Windows.Forms)‎ 一般用于窗体程序 Timer ...
原生javascript模仿win8等待进度条。
一.序言一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...
原生javascript写的侧栏跟随效果
浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...
环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）
缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...
JavaScript+svg绘制的一个动态时钟
结果图: 代码如下: <!DOCTYPE html> <html> <head> <title>动态时钟</title> </head ...
使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo
前言需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...

随机推荐

用mac的safari浏览器调试ios手机的网页
iOS 6给Safari带来了远程的Web检查器工具. 一.参考链接 ios开发者文档 safari开发者工具 remote debugging safari 二.设置iphone 设置 -> ...
开发ASP.NET MVC 在线录音录像（音视频录制并上传）
最近有个在线招聘录音的开发需求,需要在招聘网站上让招聘者上传录音和视频. 找到两个不错的javascript开源,可以在除了IE以外的浏览器运行. https://github.com/mattdia ...
MapReducer
MapReducer 概述是一个分布式的计算框架(编程模型),最初由由谷歌的工程师开发,基于GFS的分布式计算框架.后来Cutting根据<Google Mapreduce ...
zookeeper+kafka集群的安装部署
准备工作上传 zookeeper-3.4.6.tar.gz.scala-2.11.4.tgz.kafka_2.9.2-0.8.1.1.tgz.slf4j-1.7.6.zip 至/usr/local目 ...
如何开启windows的linux子系统
win10一周年纪念版 1607的版本增加了bash,bash,bash,windows的shell中可以直接运行bash了. 下面说一下配置步骤: 1.设置 —更新和安全—针对开发人员,选择开发人 ...
MVC3学习：利用mvc3+ajax结合MVCPager实现分页
本例使用表格Users(Uid,UserName,PassWord),数据库访问使用EF first code. public class Users { [Key] public int Uid { ...
六、CLR下的托管代码应用程序与非托管代码程序之间的性能对比
1.托管程序二次编译的问题,以及微软做的优化五.CLR加载程序集代码时,JIT编译器对性能的产生的影响中介绍了CLR下托管应用程序的二次编译对性能产生的影响.事实上,在IL编译成本机代码的时候的时候 ...
let'encript 解决证书问题
今天服务器let'encript证书过期了,年纪大了老忘,不得不把别人的博客看一遍,就是因为我不想定时任务执行acme_tiny.py,还是写个文档记下,很久不写对外博客了,冒个泡. 1.创建普通域名 ...
Apple Pay 支付集成
Refer:https://open.unionpay.com/ajweb/product/detail?id=80 交易步骤: 1.浏览并选购商品:用户通过手机客户端与商户系统交互浏览选购商品,客户 ...
ubuntu 下配置elasticSearch
配置JAVA环境配置jdk 上官网下载x64的和ubuntu匹配的jdk 找到usr/java ,解压下载的文件 tar –xzvf 文件.tar.gz Vim /etc/source 添加配 ...

canvas ：原生javascript编写动态时钟

canvas ：原生javascript编写动态时钟

绘制表盘

时针

分针

秒针

数字表

下面附上整体代码：

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

随机推荐

热门专题