zoukankan      html  css  js  c++  java

  • HTML5应用之时钟

    利用HTML5的Canvas API可以完成我们以前意想不到的动画效果，以前我们想在网页上放置一个时钟，需要先用flash工具制作一个钟表，并写上复杂的JavaScript代码，然后载入到页面中。而HTML5的到来，我们可以直接在页面中使用canvas标签并配合javascript就可以完成一个漂亮的时钟。





    今天，我们一起来使用HTML5制作一个指针会走动的时钟。

    HTML

    我们只需要在html中放置一个canvas标签：#clock，宽度和高度都是400px。

    [html] view plaincopy
     
    1. <!DOCTYPE HTML>  
    2. <html>  
    3. <head>  
    4. <meta charset="utf-8">  
    5. <title>HTML5应用之时钟</title>  
    6. </head>  
    7.   
    8. <body>  
    9. <canvas id="clock" width="400" height="400"></canvas>   
    10. </body>  
    11. </html>  


    Javascript

    我们先来获取当前时间：包括时分秒，确保在打开页面时能定位指针位置，并且定义好圆点坐标和秒钟角度变量。

    [js] view plaincopy
     
    1. var time = new Date();  
    2. var h = time.getHours(); //时  
    3. var m = time.getMinutes(); //分  
    4. var s = time.getSeconds(); //秒  
    5. h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12); //时针 初始位置  
    6. var x=200,y=200,sAngle=0; //x y 原点 秒针角度变量  


    接下来，我们利用canvas来绘制时钟，我们写一个函数draw()，绘制刻度，执行该函数一次，则秒针顺时针走动1/60个圆弧度。

    首先，获取canvas绘图对象，绘制时钟刻度。我们将时钟（圆）划分为12个刻度，即每个刻度代表一个钟头，当然，你也可以划分为60个刻度，这样每个刻度就代表1分钟。

    [js] view plaincopy
     
    1. function draw(){  
    2.     var c=document.getElementById("clock");  
    3.     var ctx=c.getContext("2d"); //获取绘图对象  
    4.     ctx.clearRect(0,0,c.width,c.height); //清除上次绘制的图形  
    5.     s++;//秒针  
    6.    
    7.     ctx.fillStyle = '#fff' //填充白色背景色   
    8.     ctx.fillRect(0,0,c.width,c.height);   //设置画布区域  
    9.    
    10.     ctx.save(); //保存当前绘图状态  
    11.    
    12.     // 时间刻度  
    13.     for(var i=0;i<12;i++){ //划分12刻度  
    14.         var angle=(Math.PI*2)/12; //获得每个刻度对应的弧度  
    15.         ctx.beginPath();//开始绘制  
    16.         ctx.font="12px Arial"; //设置字体  
    17.         if(i==0||i==3||i==6||i==9){ //当指向0（12点）、3点、6点、9点时  
    18.              ctx.fillStyle="red"; //刻度为红色  
    19.              radius=4; //刻度半径长4px  
    20.         }else{  
    21.              ctx.fillStyle="blue"; //刻度为蓝色  
    22.              radius=3; //刻度半径长为3px  
    23.         }  
    24.    
    25.         ctx.arc(x,y-100,radius,0,Math.PI*2,true); //画圆作为刻度  
    26.         ctx.fill(); //填充路径  
    27.         transform(ctx,x,y,angle,true);  //刻度分布                
    28.     }  
    29.     ctx.restore(); //恢复上次保存的绘图状态  
    30.     ...  
    31. }  


    按照上面的代码可以绘制一个带刻度的圆盘作为时钟的表盘。接下来我们继续在函数draw()里写时分秒指针的转动。

    [js] view plaincopy
     
    1. function draw(){  
    2.     ...  
    3.     sAngle=(Math.PI*2)/60*s; //秒度  
    4.     //时针转动  
    5.     ctx.save();   
    6.     ctx.strokeStyle="red";  
    7.     ctx.lineWidth=3;  
    8.     transform(ctx,x,y,(Math.PI*2)/60*h);   
    9.     sj(ctx,x,y,y-40);  
    10.     ctx.restore();  
    11.       
    12.     //分针转动  
    13.     ctx.save();  
    14.     ctx.strokeStyle="blue";  
    15.     ctx.lineWidth=2;  
    16.     transform(ctx,x,y,(Math.PI*2)/60*m);   
    17.     sj(ctx,x,y,y-68);  
    18.     ctx.restore();  
    19.    
    20.     //秒针转动  
    21.     ctx.save();  
    22.     ctx.strokeStyle="#000";  
    23.     transform(ctx,x,y,sAngle);    
    24.     sj(ctx,x,y,y-80);  
    25.     ctx.restore();  
    26.       
    27.     //数据整理  
    28.     if(s%60==0){  
    29.         sAngle=0,s=0,m++;  
    30.         if(m%12==0){ //每十二分 时针旋转一次  
    31.             if(m!=0)h++;  
    32.             if(m%60==0)m=0;  
    33.         }  
    34.         if(h%60==0)h=0;   
    35.     }  
    36. }  


    每调用一次draw(),我们对时分秒针设置不同的填充颜色和指针粗细，绘制指针，根据弧度转动指针位置，其中我们调用了自定义函数trans()和pointer()。

    函数pointer()用来绘制指针。其中ctx表示canvas对象，x,y是圆点坐标，z是指针头的位置。

    [js] view plaincopy
     
    1. function pointer(ctx,x,y,z){  
    2.      ctx.beginPath();  
    3.      ctx.moveTo(x,y);  
    4.      ctx.lineTo(x,z);  
    5.      ctx.stroke();  
    6.      ctx.fill();  
    7. }  


    函数transform()用来旋转指针。其中ctx表示canvas对象，x,y是圆点坐标，angle是转动角度。

    [js] view plaincopy
     
    1. function trans(ctx,x,y,angle){  
    2.      ctx.transform(Math.cos(angle), Math.sin(angle),   
    3.         -Math.sin(angle), Math.cos(angle),   
    4.         x*(1-Math.cos(angle)) + x*Math.sin(angle),   
    5.         y*(1-Math.cos(angle)) - y*Math.sin(angle))  
    6. }  


    最后，我们设置每隔1秒钟（即1000毫秒）执行一次draw()。

    [js] view plaincopy
     
      1. setInterval("draw()",1000);  
  • 相关阅读:
    【vue】饿了么项目-goods商品列表页开发
    【vue】饿了么项目-header组件开发
    转转hybrid app web静态资源离线系统实践
    从列表到详情，没你想的那么简单
    浅谈Async/Await
    小程序代码包压缩 策略&方案
    微信小程序使用场景延伸：扫码登录、扫码支付
    这一次带你彻底了解Cookie
    常见函数错误引发的思考.
    触碰密码世界的大门
  • 原文地址：https://www.cnblogs.com/good10000/p/4760201.html
Copyright © 2011-2022 走看看