<! 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. php date之间的相互转换

    字符串转成date $str =date("Y-m-d H:i:s",strtotime("2011-12-12 14:23:01")); echo $str; ...

  2. 03-树2 List Leaves（25 point(s)） 【Tree】

    03-树2 List Leaves(25 point(s)) Given a tree, you are supposed to list all the leaves in the order of ...

  3. 锁定xcode api 文档

    1, 打开终端2, 前往Xcode.app, 命令: cd /Applications/Xcode.app 3, 把头文件修改为只读, 命令: sudo chown -hR root:wheel Co ...

  4. 最全的Android源码目录结构详解【转】

    本文转载自:http://blog.csdn.net/yangwen123/article/details/8055025 Android 2.1|-- Makefile|-- bionic     ...

  5. SQL：内连接、左外连接、右外连接、全连接、交叉连接区别

    有两个表A和表B.表A结构如下: Aid:int:标识种子,主键,自增ID Aname:varchar 数据情况,即用select * from A出来的记录情况如下图1所示: 图1:A表数据表B结构 ...

  6. PHP编写网页BS结构计算器

    利用PHP和Html + javascript 编写一个简单的网页计算器程序,可以根据这种有趣的开发构架出更加有趣的网页.​1. [代码]PHP计算器    <html><head& ...

  7. 配置JDK和Tomcat环境变量(转)

    1.安装JDK 安装好JDK后,再配置JDK的环境变量:在“我的电脑”上点右键—>“属性”—>“高级”—> “环境变量(N)”. 新建系统变量JAVA_HOME:C:/Program ...

  8. Local storage htm5

    使用本地存储,web应用可以在用户浏览器中本地存储数据. 在HTML5之前,应用数据存储必须使用cookie,包括每个服务端的请求,本地存储更加安全,并且可以存储大量的数据到本地,不影响网站的性能. ...

  9. Swift引用计数器

    ARC概述 和4.2+版本的Xcode对OC的支持一样,Swift也是使用ARC来管理内存,文档是这么描述的: Swift uses Automatic Reference Counting(ARC) ...

  10. PYTHON 异常处理 二 TRY 模块

    异常处理 捕捉异常可以使用try/except语句. try/except语句用来检测try语句块中的错误,从而让except语句捕获异常信息并处理. 如果你不想在异常发生时结束你的程序,只需在try ...