你的位置:首页 > 软件开发 > 网页设计 > [js高手之路] html5 canvas教程

[js高手之路] html5 canvas教程

发布时间:2017-10-13 03:01:03
效果图:这个实例主要注意:1,剩余时间的计算2,每个时间数字的绘制时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 )num.js文件: 1 var digital = 2 [ 3 [ 4 [0,0,1,1,1,0,0], 5 [ ...

效果图:

[js高手之路] html5 canvas教程

这个实例主要注意:

1,剩余时间的计算

2,每个时间数字的绘制

时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 )

num.js文件:

[js高手之路] html5 canvas教程[js高手之路] html5 canvas教程
 1 var digital = 2 [ 3  [ 4   [0,0,1,1,1,0,0], 5   [0,1,1,0,1,1,0], 6   [1,1,0,0,0,1,1], 7   [1,1,0,0,0,1,1], 8   [1,1,0,0,0,1,1], 9   [1,1,0,0,0,1,1], 10   [1,1,0,0,0,1,1], 11   [1,1,0,0,0,1,1], 12   [0,1,1,0,1,1,0], 13   [0,0,1,1,1,0,0] 14  ],//0 15  [ 16   [0,0,0,1,1,0,0], 17   [0,1,1,1,1,0,0], 18   [0,0,0,1,1,0,0], 19   [0,0,0,1,1,0,0], 20   [0,0,0,1,1,0,0], 21   [0,0,0,1,1,0,0], 22   [0,0,0,1,1,0,0], 23   [0,0,0,1,1,0,0], 24   [0,0,0,1,1,0,0], 25   [1,1,1,1,1,1,1] 26  ],//1 27  [ 28   [0,1,1,1,1,1,0], 29   [1,1,0,0,0,1,1], 30   [0,0,0,0,0,1,1], 31   [0,0,0,0,1,1,0], 32   [0,0,0,1,1,0,0], 33   [0,0,1,1,0,0,0], 34   [0,1,1,0,0,0,0], 35   [1,1,0,0,0,0,0], 36   [1,1,0,0,0,1,1], 37   [1,1,1,1,1,1,1] 38  ],//2 39  [ 40   [1,1,1,1,1,1,1], 41   [0,0,0,0,0,1,1], 42   [0,0,0,0,1,1,0], 43   [0,0,0,1,1,0,0], 44   [0,0,1,1,1,0,0], 45   [0,0,0,0,1,1,0], 46   [0,0,0,0,0,1,1], 47   [0,0,0,0,0,1,1], 48   [1,1,0,0,0,1,1], 49   [0,1,1,1,1,1,0] 50  ],//3 51  [ 52   [0,0,0,0,1,1,0], 53   [0,0,0,1,1,1,0], 54   [0,0,1,1,1,1,0], 55   [0,1,1,0,1,1,0], 56   [1,1,0,0,1,1,0], 57   [1,1,1,1,1,1,1], 58   [0,0,0,0,1,1,0], 59   [0,0,0,0,1,1,0], 60   [0,0,0,0,1,1,0], 61   [0,0,0,1,1,1,1] 62  ],//4 63  [ 64   [1,1,1,1,1,1,1], 65   [1,1,0,0,0,0,0], 66   [1,1,0,0,0,0,0], 67   [1,1,1,1,1,1,0], 68   [0,0,0,0,0,1,1], 69   [0,0,0,0,0,1,1], 70   [0,0,0,0,0,1,1], 71   [0,0,0,0,0,1,1], 72   [1,1,0,0,0,1,1], 73   [0,1,1,1,1,1,0] 74  ],//5 75  [ 76   [0,0,0,0,1,1,0], 77   [0,0,1,1,0,0,0], 78   [0,1,1,0,0,0,0], 79   [1,1,0,0,0,0,0], 80   [1,1,0,1,1,1,0], 81   [1,1,0,0,0,1,1], 82   [1,1,0,0,0,1,1], 83   [1,1,0,0,0,1,1], 84   [1,1,0,0,0,1,1], 85   [0,1,1,1,1,1,0] 86  ],//6 87  [ 88   [1,1,1,1,1,1,1], 89   [1,1,0,0,0,1,1], 90   [0,0,0,0,1,1,0], 91   [0,0,0,0,1,1,0], 92   [0,0,0,1,1,0,0], 93   [0,0,0,1,1,0,0], 94   [0,0,1,1,0,0,0], 95   [0,0,1,1,0,0,0], 96   [0,0,1,1,0,0,0], 97   [0,0,1,1,0,0,0] 98  ],//7 99  [100   [0,1,1,1,1,1,0],101   [1,1,0,0,0,1,1],102   [1,1,0,0,0,1,1],103   [1,1,0,0,0,1,1],104   [0,1,1,1,1,1,0],105   [1,1,0,0,0,1,1],106   [1,1,0,0,0,1,1],107   [1,1,0,0,0,1,1],108   [1,1,0,0,0,1,1],109   [0,1,1,1,1,1,0]110  ],//8111  [112   [0,1,1,1,1,1,0],113   [1,1,0,0,0,1,1],114   [1,1,0,0,0,1,1],115   [1,1,0,0,0,1,1],116   [0,1,1,1,0,1,1],117   [0,0,0,0,0,1,1],118   [0,0,0,0,0,1,1],119   [0,0,0,0,1,1,0],120   [0,0,0,1,1,0,0],121   [0,1,1,0,0,0,0]122  ],//9123  [124   [0,0,0,0],125   [0,0,0,0],126   [0,1,1,0],127   [0,1,1,0],128   [0,0,0,0],129   [0,0,0,0],130   [0,1,1,0],131   [0,1,1,0],132   [0,0,0,0],133   [0,0,0,0]134  ]//:135 ];
View Code

 

倒计时实现:

 1 <head> 2  <meta charset='utf-8' /> 3  <style> 4   #canvas { 5    border: 1px dashed #aaa; 6   } 7  </style> 8  <script src='/images/loading.gif' data-original="./num.js"></script> 9  <script>10   window.onload = function () {11    var oCanvas = document.querySelector("#canvas"),12     oGc = oCanvas.getContext('2d'),13     width = oCanvas.width, height = oCanvas.height,14     radius = 10,15     leftTime = 0,16     endTime = new Date( 2017, 09, 10, 15, 30, 02 );17    18    leftTime = getLeftTime();19    showTime( oGc );20    setInterval(function(){21     oGc.clearRect( 0, 0, width, height );22     leftTime = getLeftTime();23     showTime( oGc );24    }, 1000);25 26    function showTime( cxt ){27     var hour = parseInt( leftTime / 3600 );28     var min = parseInt( ( leftTime - hour * 3600 ) / 60 );29     var sec = leftTime % 60;30 31     showNum( 0, 0, parseInt( hour / 10 ), cxt );32     showNum( 15 * ( radius + 1 ), 0, parseInt( hour % 10 ), cxt );33     showNum( 30 * ( radius + 1 ), 0, 10, cxt );34     showNum( 39 * ( radius + 1 ), 0, parseInt( min / 10 ), cxt );35     showNum( 54 * ( radius + 1 ), 0, parseInt( min % 10 ), cxt );36     showNum( 69 * ( radius + 1 ), 0, 10, cxt );37     showNum( 78 * ( radius + 1 ), 0, parseInt( sec / 10 ), cxt );38     showNum( 93 * ( radius + 1 ), 0, parseInt( sec % 10 ), cxt );39    }40 41    function getLeftTime(){42     var curTime = new Date();43     var restTime = endTime.getTime() - curTime.getTime();44     restTime = Math.round( restTime / 1000 );45     return restTime > 0 ? restTime : 0;46    }47 48    //显示时间的每一位49    function showNum( x, y, num, cxt ){50     cxt.fillStyle = '#09f';51     for( var i = 0; i < digital[num].length; i++ ){52      for( var j = 0; j < digital[num][i].length; j++ ){53       if ( digital[num][i][j] == 1 ){54        cxt.beginPath();55        cxt.arc( x + j * 2 * ( radius + 1 ) + ( radius + 1 ), y + i * 2 * ( radius + 1 ) + ( radius + 1 ), radius, 0, + 360 * Math.PI / 180, false );56        cxt.closePath();57        cxt.fill();58       }59      }60     }61    }62   }63  </script>64 </head>65 <body>66  <canvas id="canvas" width="1200" height="300"></canvas>67 </body>

 


这里要注意一下,如果当前时间超过2017年10月10日15:30:02分就没有效果了,你需要把这个剩余时间设置比你当前的时间大几天就可以了  

原标题:[js高手之路] html5 canvas教程

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。