<! DOCTYPE html>

 <html>

 <head>

 <title>Clock</title>

 </head>

 <style>

 canvas{

 border:1px solid red;

 }

 </style>

 <body onload="move();">

 <canvas width=500 height=400  id="c">浏览器暂不支持该功能</canvas>

 </body>

 <script>

 //画表盘的函数

 function drawcycle(){

 var cxt=document.getElementById("c").getContext("2d");

 //画圆盘

 cxt.fillStyle='gray';

 cxt.beginPath();

 cxt.arc(250,200,120,0,Math.PI*2,false);

 cxt.closePath();

 cxt.fill();

 //画指针心

 cxt.fillStyle='black';

 cxt.beginPath();

 cxt.arc(250,200,5,0,Math.PI*2,false);

 cxt.closePath();

 cxt.fill();

 //画刻度

 cxt.fillStyle='black';

 cxt.beginPath()

 cxt.fillRect(248,81,4,10);

 cxt.fillRect(360,198,10,4);

 cxt.fillRect(248,310,4,10);

 cxt.fillRect(130,198,10,4);

 cxt.closePath();

 //画线条观测刻度位置是否端正

 cxt.moveTo(250,80);

 cxt.lineTo(250,320);

 cxt.moveTo(130,200);

 cxt.lineTo(370,200);

 cxt.stroke();*/

 }

 //变量alphe代表秒针初始状态所在位置角度

 var alphe=Math.PI/2;

 //变量bata代表分针初始状态所在位置角度

 var bata=Math.PI/2;

 //变量gama代表时针初始状态所在角度

 var gama=Math.PI/2;

 //秒针，分针，时针长度定义

 var second_len=105;

 var minite_len=75;

 var hour_len=55;

 //画针的函数

 function drawpaint(){

 //画布的宽高

 var width=500;

 var height=400;

 //秒针初始位置

 var second_start_width=250;

 var second_start_height=95;

 //分针初始化

 var minite_start_width=0;

 var minite_start_height=0;

 //时针初始化

 var hour_start_width=0;

 var hour_start_height=0;

 var cxt=document.getElementById("c").getContext("2d");

 cxt.clearRect(0,0,width,height);

 drawcycle();

 cxt.fillStyle='black';

 //画秒针

 cxt.moveTo(250,200);

 var del=Math.PI/30;

 alphe=alphe-del;

 second_start_width +=second_len*Math.cos(alphe);

 second_start_height =200-second_len*Math.sin(alphe);

 cxt.lineTo(second_start_width,second_start_height);

 cxt.stroke();

 //画分针

 cxt.moveTo(250,200);

 //分针一秒转过的角度

 var del_min=Math.PI/1800;

 bata=bata-del_min;

 minite_start_width =250+minite_len*Math.cos(bata);

 minite_start_height =200-minite_len*Math.sin(bata);

 cxt.lineTo(minite_start_width,minite_start_height);

 cxt.stroke();

 //cxt.fillRect(248,110,4,90);

 //画时针

 cxt.moveTo(250,200);

 //时针一秒转过的角度

 var del_hou=Math.PI/108000;

 gama=gama-del_hou;

 hour_start_width =250+hour_len*Math.cos(gama);

 hour_start_height =200-hour_len*Math.sin(gama);

 cxt.lineTo(hour_start_width,hour_start_height);

 cxt.stroke();

 //cxt.fillRect(247,130,6,70);*/

 }

 function move(){

 setInterval('drawpaint()',1000);

 }

 </script>

 </html>
  • 实现思路：首先要有绘图的画布，既要用到canvas画布，其次要绘出表盘的图案，最后要画出针的位置，这里注意到不管是时针还是分针亦或是秒针，他们的圆心始终是重叠的，唯一要关注的就是画线的终点坐标，这里就要有一定的几何图案的分析能力。
  • 运行效果：

canvas+js实现时钟效果图的更多相关文章

  1. 利用js+canvas实现的时钟效果图

    canvas+js时钟特效 运用js+canvas方面的知识完成一个时钟的效果图,再利用for循环实现指针的转动效果: <!--网页文档的声明--> <!doctype html&g ...

  2. html5 canvas js(数字时钟)

      <!doctype html> <html> <head> <title>canvas dClock</title> </head ...

  3. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  4. JS + HTml 时钟代码实现

    JS+ Html 画布实现的时钟效果图: 闲来无聊做了一个网页的时钟,效果模拟传统时钟的运行方式, 运用了html 的画布实现指针,背景图片引用了网络图片. 具体原理: 首先将时钟分为四个不同区域,对 ...

  5. canvas画的时钟

    结合几天来学习的canvas的API,终于完成了一个时钟呵呵 html <!doctype html> <html> <head> <meta charset ...

  6. canvas炫酷时钟

    canvas炫酷时钟 实现的功能 主要用到canvas的一些基础api 直接看效果 html: <canvas id="myCanvas" width="500&q ...

  7. js 动态时钟

    js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  8. canvas.js | CLiPS

    canvas.js | CLiPS canvas.js The canvas.js module is a simple and robust JavaScript API for the HTML5 ...

  9. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

随机推荐

  1. HBase开发

    MapReduce接口 HBase提供了TableInputFormat.TableOutputFormat.TableMapper和TableReducer类来支持使用MapReduce框架处理HB ...

  2. [HTML & CSS] HTML和CSS基础知识

    最近将博客简单地修饰了下,需要用到HTML和CSS代码,花了一天时间学习了一下这两方面的知识.虽然内容很简单,但是足够用来修改自己的博客了. 1. HTML 1.1. HTML介绍 HTML与CSS的 ...

  3. SpringMVC ajax技术无刷新文件上传下载删除示例

    参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...

  4. 数据结构之 字符串---字符串匹配（kmp算法）

    串结构练习——字符串匹配 Time Limit: 1000MS Memory limit: 65536K 题目描述   给定两个字符串string1和string2,判断string2是否为strin ...

  5. JAVA 内部类 （一）

    可将一个类定义置入另一个类定义中.这就叫作“内部类”.内部类对我们非常有用,因为利用它可对那些逻辑上相互联系的类进行分组,并可控制一个类在另一个类里的“可见性”.然而,我们必须认识到内部类与以前讲述的 ...

  6. 升级python之后yum不可用

    #修改yum文件 vi /usr/bin/yum 将文件头部的 #!/usr/bin/python 改为默认的python文件,例如 #!/usr/bin/python2.7.3 整个过程完成了. 同 ...

  7. 《Kubernetes权威指南第2版》学习（一） Kubernetes是什么

    1.1 Kubernetes是什么? 首先,它是一个全新的基于容器技术的分布式架构领先方案.是谷歌的Borg(大规模集群管理系统)的一个开源版本. 其次,如果系统设计遵循了Kubernetes的设计思 ...

  8. 解除win10禁ping方法

    在局域网中,有一台电脑安装了win10操作系统,win10电脑连接网络没有问题,就是在其他电脑ping这台windows10电脑时就是ping不通,显示“请求超时.”.虽然这台windows10电脑联 ...

  9. Struts过滤器

    StrutsPrepareAndExecuteFilter过滤器其实是包含2部分的 StrutsPrepareFilter:做准备 StrutsExecuteFilter:进入Struts2的核心处理 ...

  10. 3.7-3.10 Hive 企业使用优化1

    一.Fetch Task 在执行hive代码的时候,一条简单的命令大部分都会转换成为mr代码在后台执行, 但是有时候我们仅仅只是想获取一部分数据而已,仅仅是获取数据,还需要转化成为mr去执行吗? 那个 ...