查看: 846|回复: 0

[DIV/CSS] canvas基础绘制-倒计时(上)

发表于 2017-9-24 08:00:05
尚学堂AD

效果:

html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>digit</title>
  6. </head>
  7. <body>
  8. <canvas id="canvas"></canvas>
  9. <script src="digit_1.js"></script>
  10. <script src="countdown.js"></script>
  11. </body>
  12. </html>
复制代码

countdown.js:

  1. var WINDOW_WIDTH = 1024;
  2. var WINDOW_HEIGHT = 768;
  3. var RADIUS = 8;
  4. var MARGIN_TOP = 60;
  5. var MARGIN_LEFT = 30;
  6. const endTime = new Date(2017,8,17,18,30,00);//const声明变量,不可修改,必须声明时赋值;
  7. var curShowTimeSeconds = 0;
  8. window.onload = function () {
  9. var canvas = document.getElementById("canvas");
  10. var context = canvas.getContext("2d");
  11. canvas.width = WINDOW_WIDTH;
  12. canvas.height = WINDOW_HEIGHT;
  13. curShowTimeSeconds = getCurrentShowTimeSeconds();
  14. setInterval(
  15. function () {
  16. update();
  17. render(context);
  18. },50)
  19. };
  20. function getCurrentShowTimeSeconds() {
  21. var curTime = new Date();//获取目前时间;
  22. var ret = endTime.getTime()-curTime.getTime();
  23. ret = Math.round(ret/1000);//获取秒数差值;
  24. return ret>=0?ret:0;
  25. }
  26. function update() {
  27. var nextShowTimeSeconds = getCurrentShowTimeSeconds();
  28. var nextHours = parseInt(nextShowTimeSeconds/3600);
  29. var nextMinutes = parseInt((nextShowTimeSeconds-nextHours*3600)/60);
  30. var nextSeconds = nextShowTimeSeconds%60;
  31. var curHours = parseInt(curShowTimeSeconds/3600);
  32. var curMinutes = parseInt((curShowTimeSeconds-curHours*3600)/60);
  33. var curSeconds = curShowTimeSeconds%60;
  34. if(nextSeconds!=curSeconds){
  35. curShowTimeSeconds = nextShowTimeSeconds;
  36. }
  37. }
  38. function render(cxt) {
  39. //每一帧都要对动画进行刷新,不然就会新的旧的叠在一起;
  40. cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);//对一个矩形空间里的动画进行刷新;
  41. var hours = parseInt(curShowTimeSeconds/3600);
  42. var minutes = parseInt((curShowTimeSeconds-hours*3600)/60);
  43. var seconds = curShowTimeSeconds%60;
  44. renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt);
  45. renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);
  46. renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);
  47. renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);
  48. renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);
  49. renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,cxt);
  50. renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);
  51. renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt);
  52. }
  53. function renderDigit(x,y,num,cxt) {
  54. cxt.fillStyle = "rgb(0,102,153)";
  55. for(var i=0;i<digit[num].length;i++){//数组行
  56. for(var j=0;j<digit[num][i].length;j++){//数组列
  57. if(digit[num][i][j] == 1){
  58. cxt.beginPath();
  59. cxt.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
  60. cxt.closePath();
  61. cxt.fill();
  62. }
  63. }
  64. }
  65. }
复制代码



回复

使用道具 举报