[Js master path] html5 canvas tutorial, html5canvas
:
Note:
1. Remaining Time Calculation
2. Draw numbers at each time
The time is mainly composed of 0-9 and a colon, represented by an array (0: do not draw a circle, 1: Draw a blue circle)
Num. js file:
1 var digital = 2 [3 [4 [, 0], 5 [,], 6, 1], 7 [, 1], 8 [, 1], 9 [, 1], 10,, 1], 11 [, 1], 12 [,], 13, 0] 14], // 0 15 [16 [, 0], 17 [,], 18, 0], 19 [, 0], 20 [, 0], 21 [, 0], 22,, 0], 23 [, 0], 24 [, 0], 25, 1] 26], // 1 27 [28 [,], 29 [, 1], 30, 1], 31 [, 0], 32 [, 0], 33 [, 0], 34,, 0, 0], 35 [, 0], 36 [, 1], 37, 1] 38], // 2 39 [40 [, 1], 41 [,], 42, 0], 43 [, 0], 44 [,], 45 [,], 46,, 1], 47 [, 0, 1], 48 [, 1], 49, 0] 50], // 3 51 [52 [,], 53 [,], 54, 0], 55 [,], 56 [,], 57 [, 1], 58,, 0], 59 [, 0], 60 [,], 61, 1] 62], // 4 63 [64 [, 1], 65 [, 0, 0], 66 [, 0, 0, 0], 67 [,], 68 [, 1], 69 [, 1], 70,, 1], 71 [, 1], 72 [, 1], 73, 0] 74], // 5 75 [76 [, 0], 77 [, 0], 78, 0], 79 [, 0, 0], 80 [,], 81 [, 1], 82,, 1], 83 [, 1], 84 [, 1], 85, 0] 86], // 6 87 [88 [, 1], 89 [, 1], 90, 0], 91 [, 0], 92 [, 0], 93 [, 0], 94,, 0, 0], 95 [, 0], 96 [, 0], 97, 0] 98], // 7 99 [100 [101, 102, 1], 103 [104, 105, 0, 106, 1, 0, 0, 107, 1], 108 [109, 0, 1, 0] 110], // 8111 [112 [113, 114, 1], 115 [116, 117, 118, 0, 0, 119, 1], 120 [0, 0, 0, 121, 0] 122], // 9123 [124 [125 [126, 127], [,], [,], [,], 128 [129, 130], 131 [132, 133, 134] 135] //:];View Code
Countdown implementation:
1<Head> <meta charset = 'utf-8'/> <style> # canvas {border: 1px dashed # aaa ;} </style> <script> var digital = [[[, 0, 1], [, 1], [, 1], [, 1, 1], [, 1], [,], [, 0], // 0 [[, 0], [, 0], [, 0,, 0], [, 0], [, 0], [, 1 ,], [, 0], [, 0], [, 1], // 1 [[, 0], [, 1], [, 1,, 0], [, 0], [, 0], [, 0], [, 0, 0, 0, 0], [, 1], [, 1], // 2 [[, 1], [, 1], [,], [, 0], [, 0], [,], [,], [, 1], [, 1], [0, 1,, 0], // 3 [[, 0, 0], [,], [,], [, 1, 0], [, 0], [,], [, 1], // 4 [[, 1], [, 0, 0], [, 0,, 0], [, 1], [, 1], [, 1,, 1], [, 1], [, 0], // 5 [[0, 0, 0], [0, 0, 1, 1, 0 ,], [, 0, 0, 0], [, 0], [, 0,, 1], [, 1], [, 1], [, 1,, 0], // 6 [[, 1], [, 1], [,], [,], [, 0], [, 0], [, 0], [, 0], [, 0], [,], // 7,, 0], [, 1], [, 1], [, 1,, 0], [, 1], [, 1], [, 1, 0, 0, 1], [, 0], // 8, 1], [, 1], [, 1], [, 1, 1], [, 1], [,], [, 0], [, 0, 0], // 9 [[,], [,], [,], [,], [,], [,], [,], [,], [,], [,], [,] //:]; </s Scripts> <script> window. onload = function () {var oCanvas = document. querySelector ("# canvas"), oGc = oCanvas. getContext ('2d '), width = oCanvas. width, height = oCanvas. height, radius = 10, leftTime = 0, endTime = new Date (2017, 09, 10, 15, 30, 02); leftTime = getLeftTime (); showTime (oGc ); setInterval (function () {oGc. clearRect (0, 0, width, height); leftTime = getLeftTime (); showTime (oGc );}, 1000); function showTime (cxt) {var hour = parseInt (leftTime/3600); var min = parseInt (leftTime-hour * 3600)/60 ); var sec = leftTime % 60; showNum (0, 0, parseInt (hour/10), cxt); showNum (15 * (radius + 1), 0, parseInt (hour % 10), cxt); showNum (30 * (radius + 1), 0, 10, cxt); showNum (39 * (radius + 1), 0, parseInt (min/10), cxt); showNum (54 * (radius + 1), 0, ParseInt (min % 10), cxt); showNum (69 * (radius + 1), 0, 10, cxt); showNum (78 * (radius + 1), 0, parseInt (sec/10), cxt); showNum (93 * (radius + 1), 0, parseInt (sec % 10), cxt);} function getLeftTime () {var curTime = new Date (); var restTime = endTime. getTime ()-curTime. getTime (); restTime = Math. round (restTime/1000); return restTime> 0? RestTime: 0;} // each function showNum (x, y, num, cxt) of the display time {cxt. fillStyle = '# 09f'; for (var I = 0; I <digital [num]. length; I ++) {for (var j = 0; j <digital [num] [I]. length; j ++) {if (digital [num] [I] [j] = 1) {cxt. beginPath (); cxt. arc (x + j * 2 * (radius + 1) + (radius + 1), y + I * 2 * (radius + 1) + (radius + 1), radius, 0, + 360 * Math. PI/180, false); cxt. closePath (); cxt. fill ();}}}}} </script> </pead> <body> <canvas id = "canvas" width = "1200" height = "300"> </canvas> </body>
Run code Note that if the current time exceeds 15:30:02 on April 9, October 10, 2017, it will not work. You need to set the remaining time to a few days later than your current time.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
