<! 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. appium(8)-locator strategies

    locator strategies Finding and interacting with elements Appium supports a subset of the WebDriver l ...

  2. Lua学习笔记(1) ——语法

    1.  Lua -i main.lua -i 进入交互模式 -l 加载一个库 -e  “lua code” 直接在命令行执行lua code 2. 注释 -- This is a line comme ...

  3. Rime输入工具的修改与编译安装

    作为一个比较“事儿多”的五笔用户,在使用过几乎所有的主流输入工具后,我最终选择了定制性非常高(同时也比较难以上手)的Rime.刚开始是在Windows下使用小狼毫0.9.30版,这个工具在上屏速度.热 ...

  4. Transaction事务注解和DynamicDataSource动态数据源切换问题解决

    问题描述: 写主库开事务的情况下会导致时不时的将更新/插入操作写入到从库上, 导致mysqlException update command denied   问题原因: jetty的工作队列会重用处 ...

  5. BestCoder7 1002 Little Pony and Alohomora Part I(hdu 4986) 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4986 题目意思:有 n 个box(从左到右编号依次为1~n),每个box里面有一个随机的钥匙,有可能这 ...

  6. SVN 如何更换IP地址

    一.进去项目空白处. 二.点击右键TortoiseSVN. 三.选中Relocate. 四.弹出框如下: 把原来的IP地址更换成新的IP地址,再点击OK就可以了.

  7. Snmp在Windows下的实现----WinSNMP编程原理

    在Windows 下实现SNMP协议的编程,可以采用Winsock接口,在161,162端口通过udp传送信息.在Windows 2000中,Microsoft已经封装了SNMP协议的实现,提供了一套 ...

  8. ubuntu16.04 + CUDA 9.0 + opencv3.3 安装

    安装前的准备 CUDA 9.0 安装,可以参看Ubuntu16.04 + cuda9.0 + cudnn7.1.4 + tensorflow安装 opencv 3.3.0 下载 ippicv_2017 ...

  9. HDU1496(巧妙hash)

    Equations Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  10. TypeScript完全解读(26课时)_18.Mixins混入

    本节的代码在mixin.ts文件内 同时在index.ts内引入 混入就是把两个对象或者类的内容混合到一起,从而实现一些功能复用. 对象混入 js中对象的混入 先来看一个js中对象的混入的例子 首先定 ...