canvas+js实现时钟效果图

 <! 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实现时钟效果图

最新文章

热门文章