使用canvas繪製LED時鐘
阿新 • • 發佈：2018-12-02
1 <script type="text/javascript"> 2 var canvas,ctx; 3 var canvasW = 900,canvasH = 260; 4 var clockBox = document.getElementsByTagName("body")[0]; 5 6 var lineW = 85,lineH = 18; 7 8 var bright = "#A3FF19", dark = "#233808"; 9 10 window.onload = function() { 11 operateDrawTime(); 12 } 13 14 function operateDrawTime(){ 15 drawNowTime(); 16 setInterval(function(){ 17 drawNowTime(); 18 },1000); 19 } 20 21 function drawNowTime(){ 22 canvas && clockBox.removeChild(canvas);23 newCanvas(); 24 25 // 獲得當前時間 26 var now = new Date(); 27 28 // 使用十二小時制 29 var hour = now.getHours(); 30 var ap = "AM"; 31 if(hour > 12){ 32 ap = "PM"; 33 hour = hour - 12;34 } 35 36 var nowHourArray = formatterToArray(hour); 37 var nowMinuteArray = formatterToArray(now.getMinutes()); 38 var nowSecondArray = formatterToArray(now.getSeconds()); 39 40 // 時 41 drawTime(nowHourArray); 42 43 // : 44 drawColon(); 45 46 // 分 47 drawTime(nowMinuteArray); 48 49 // : 50 drawColon(); 51 52 // 秒 53 drawTime(nowSecondArray); 54 55 // AM or PM 56 drawAMPMLogo(ap); 57 } 58 59 function newCanvas(){ 60 canvas = document.createElement("canvas"); 61 canvas.setAttribute("width",canvasW); 62 canvas.setAttribute("height",canvasH); 63 clockBox.appendChild(canvas); 64 65 ctx = canvas.getContext("2d"); 66 ctx.translate(0,0); 67 ctx.restore(); 68 ctx.save(); 69 } 70 71 function drawAMPMLogo(str){ 72 ctx.font = "40px Microsoft YaHei"; 73 ctx.fillStyle = bright; 74 ctx.fillText(str,lineH,3*lineH + 2*lineW); 75 } 76 77 function drawTime(items){ 78 items.forEach(function(item,idx){ 79 drawDigital(item); 80 ctx.translate(lineW+2*lineH,0); 81 ctx.save(); 82 }); 83 } 84 85 function drawDigital(digital){ 86 switch(digital){ 87 case "0": 88 drawDigital0(); 89 break; 90 case "1": 91 drawDigital1(); 92 break; 93 case "2": 94 drawDigital2(); 95 break; 96 case "3": 97 drawDigital3(); 98 break; 99 case "4": 100 drawDigital4(); 101 break; 102 case "5": 103 drawDigital5(); 104 break; 105 case "6": 106 drawDigital6(); 107 break; 108 case "7": 109 drawDigital7(); 110 break; 111 case "8": 112 drawDigital8(); 113 break; 114 case "9": 115 drawDigital9(); 116 break; 117 } 118 } 119 120 function drawDigital0(){ 121 drawLine("l1",true); 122 drawLine("l2",true); 123 drawLine("l3",true); 124 drawLine("l4",false); 125 drawLine("l5",true); 126 drawLine("l6",true); 127 drawLine("l7",true); 128 } 129 130 function drawDigital1(){ 131 drawLine("l1",false); 132 drawLine("l2",true); 133 drawLine("l3",false); 134 drawLine("l4",false); 135 drawLine("l5",true); 136 drawLine("l6",false); 137 drawLine("l7",false); 138 } 139 140 function drawDigital2(){ 141 drawLine("l1",true); 142 drawLine("l2",true); 143 drawLine("l3",false); 144 drawLine("l4",true); 145 drawLine("l5",false); 146 drawLine("l6",true); 147 drawLine("l7",true); 148 } 149 150 function drawDigital3(){ 151 drawLine("l1",true); 152 drawLine("l2",true); 153 drawLine("l3",false); 154 drawLine("l4",true); 155 drawLine("l5",true); 156 drawLine("l6",false); 157 drawLine("l7",true); 158 } 159 160 function drawDigital4(){ 161 drawLine("l1",false); 162 drawLine("l2",true); 163 drawLine("l3",true); 164 drawLine("l4",true); 165 drawLine("l5",true); 166 drawLine("l6",false); 167 drawLine("l7",false); 168 } 169 170 function drawDigital5(){ 171 drawLine("l1",true); 172 drawLine("l2",false); 173 drawLine("l3",true); 174 drawLine("l4",true); 175 drawLine("l5",true); 176 drawLine("l6",false); 177 drawLine("l7",true); 178 } 179 180 function drawDigital6(){ 181 drawLine("l1",true); 182 drawLine("l2",false); 183 drawLine("l3",true); 184 drawLine("l4",true); 185 drawLine("l5",true); 186 drawLine("l6",true); 187 drawLine("l7",true); 188 } 189 190 function drawDigital7(){ 191 drawLine("l1",true); 192 drawLine("l2",true); 193 drawLine("l3",false); 194 drawLine("l4",false); 195 drawLine("l5",true); 196 drawLine("l6",false); 197 drawLine("l7",false); 198 } 199 200 function drawDigital8(){ 201 drawLine("l1",true); 202 drawLine("l2",true); 203 drawLine("l3",true); 204 drawLine("l4",true); 205 drawLine("l5",true); 206 drawLine("l6",true); 207 drawLine("l7",true); 208 } 209 210 function drawDigital9(){ 211 drawLine("l1",true); 212 drawLine("l2",true); 213 drawLine("l3",true); 214 drawLine("l4",true); 215 drawLine("l5",true); 216 drawLine("l6",false); 217 drawLine("l7",true); 218 } 219 220 function drawLine(l,isBright){ 221 var lineColor = isBright ? bright : dark; 222 223 switch(l){ 224 case "l1": 225 ctx.translate(lineH/2,0); 226 drawLineHard(lineColor); 227 ctx.restore(); 228 ctx.save(); 229 break; 230 case "l2": 231 ctx.translate(lineW+lineH,lineH); 232 ctx.rotate(90*Math.PI/180); 233 drawLineHard(lineColor); 234 ctx.restore(); 235 ctx.save(); 236 break; 237 case "l3": 238 ctx.translate(lineH,lineH); 239 ctx.rotate(90*Math.PI/180); 240 drawLineHard(lineColor); 241 ctx.restore(); 242 ctx.save(); 243 break; 244 case "l4": 245 ctx.translate(lineH/2,lineW + lineH); 246 drawLineHard(lineColor); 247 ctx.restore(); 248 ctx.save(); 249 break; 250 case "l5": 251 ctx.translate(lineW + lineH,lineW + 2*lineH); 252 ctx.rotate(90*Math.PI/180); 253 drawLineHard(lineColor); 254 ctx.restore(); 255 ctx.save(); 256 break; 257 case "l6": 258 ctx.translate(lineH,lineW + 2*lineH); 259 ctx.rotate(90*Math.PI/180); 260 drawLineHard(lineColor); 261 ctx.restore(); 262 ctx.save(); 263 break; 264 case "l7": 265 ctx.translate(lineH/2,2*lineW + 2*lineH); 266 drawLineHard(lineColor); 267 ctx.restore(); 268 ctx.save(); 269 break; 270 } 271 } 272 273 function drawLineHard(color){ 274 ctx.beginPath(); 275 ctx.lineTo(0,7); 276 ctx.lineTo(7,0); 277 ctx.lineTo(78,0); 278 ctx.lineTo(85,7); 279 ctx.lineTo(85,11); 280 ctx.lineTo(78,18); 281 ctx.lineTo(7,18); 282 ctx.lineTo(0,11); 283 ctx.closePath(); 284 ctx.fillStyle = color; 285 ctx.fill(); 286 } 287 288 function drawColon(){ 289 ctx.fillStyle = bright; 290 ctx.fillRect(0,lineW/2+lineH,lineH,lineH); 291 ctx.fillRect(0,lineW+3*lineH+lineH/2,lineH,lineH); 292 ctx.translate(2*lineH,0); 293 ctx.save(); 294 } 295 296 function formatterToArray(time){ 297 var array = time.toString().split(""); 298 if(array.length === 1){ 299 array = ["0"].concat(array) 300 } 301 return array; 302 } 303 304 </script>