前言
辉光管这种古董最近意外的有人气呢，先不说《命运石之门》里的“世界线变动率探测仪”，前一段时间的电影《明日世界》记得也是出现类似的玩意，感觉很是好看，不过貌似现在留下来的苏联产的管子很贵了。。
canvas是html5里提供的一个绘图标签，确切的来说是提供了一些API，靠JS来完成绘图，貌似可以用来做游戏什么的，在html4里这些一律都是flash来完成的。
于是想用canvas绘图来实现这一效果~，代码并不难，我也是才接触canvas没多久请大神误抽 ![[brd10]](https://www.winotmk.com/wp-content/themes/winotmk-child/images/face/all/103.gif)
最终效果
出于效率考虑上面贴的是张图，演示在这里~https://www.winotmk.com/clock.html
没有使用一张图片，纯canvas绘图制作的！
代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 |
<!doctype html> <html> <head> <title>canvas dClock</title> <style> body{ background:#282525; text-align:center; } #clock{ }; </style> </head> <body> <canvas id = "clock" width = "500px" height = "200px"> 一个canvas程序，请升级你的浏览器！ </canvas> <script type = "text/javascript"> var clock = document.getElementById("clock"); var win = clock.getContext("2d"); //显示数字时钟 function showTime(m, n) { win.clearRect(0, 0, 500, 500); var now = new Date; var hour = now.getHours(); var min = now.getMinutes(); var sec = now.getSeconds(); hour = hour >= 10 ? hour : "0" + hour; min = min >= 10 ? min : "0" + min; sec = sec >= 10 ? sec : "0" + sec; //时，分，秒定位 bdigital(m + 20, n, hour); bdigital(m + 180, n, min); bdigital(m + 340, n, sec); //两位数的显示 function bdigital(x, y, num) { var ge = num % 10; var shi = (parseInt(num / 10)) % 10; digital(x, y, shi); digital(x + 70, y, ge); } //竖线 win.strokeStyle = '#666666'; win.lineWidth = 0.75; win.lineCap = 'round'; win.beginPath(); win.moveTo(m + 167, n+49); win.lineTo(m + 167, n+110); win.moveTo(m + 326, n+49); win.lineTo(m + 326, n+110); win.stroke(); //小时与分钟之间 win.lineCap = 'round'; win.strokeStyle = "#d69e07"; win.shadowColor = '#c73406'; win.shadowOffsetX = 0; win.shadowOffsetY = 0; win.shadowBlur = 25; win.lineWidth = 3; win.beginPath(); win.moveTo(m + 167, n + 45); win.lineTo(m + 167, n + 55); win.fill(); win.closePath(); win.stroke(); win.beginPath(); win.moveTo(m + 167, n + 70); win.lineTo(m + 167, n + 80); win.fill(); win.closePath(); win.stroke(); //分钟与秒之间 win.beginPath(); win.moveTo(m + 326, n + 45); win.lineTo(m + 326, n + 55); win.fill(); win.closePath(); win.stroke(); win.beginPath(); win.moveTo(m + 326, n + 70); win.lineTo(m + 326, n + 80); win.fill(); win.closePath(); win.stroke(); } //显示一位数字 function digital(x, y, num) { //设置风格 function theme(){ var gradient=win.createLinearGradient(y,0,y,x); gradient.addColorStop("0","#d65f07"); gradient.addColorStop("0.5","#eda849"); gradient.addColorStop("1.0","#d69e07"); win.strokeStyle = gradient; win.lineWidth = 2.5; win.lineCap = 'round'; win.shadowColor = '#c73406'; win.shadowOffsetX = 0; win.shadowOffsetY = 0; win.shadowBlur = 25; } function wang(){ //网 win.lineWidth = 0.7; win.strokeStyle = 'rgba(15,10,10,0.5)';//6e512f win.shadowColor = 'rgba(0,0,0,0)'; win.shadowOffsetX = 0; win.shadowOffsetY = 0; var k = 5; for ( var i=0;i<22;i++){ for ( var j=0;j<13;j++){ win.beginPath(); win.arc(x+j*k+2,y+i*k+2,2.3,0,Math.PI*2,true); win.stroke(); } } } function nolight(){ //style win.strokeStyle = '#666666'; win.lineWidth = 1; win.lineCap = 'round'; win.shadowColor = 'rgba(0,0,0,0)'; win.shadowOffsetX = 0; win.shadowOffsetY = 0; //0 zero(); //1 one(); //2 two(); //3 three(); //4 four(); //5 five(); //6 six(); //7 seven(); //8 eight(); //9 nine(); } //0 function zero() { var k = .7922848, a = 23, b = 48, ox = a * k, // 水平控制点偏移量 oy = b * k, // 垂直控制点偏移量 x2 = x+32, y2 = y+54; win.beginPath(); //从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线 win.moveTo(x2 - a, y2); win.bezierCurveTo(x2 - a, y2 - oy, x2 - ox, y2 - b, x2, y2 - b); win.bezierCurveTo(x2 + ox, y2 - b, x2 + a, y2 - oy, x2 + a, y2); win.bezierCurveTo(x2 + a, y2 + oy, x2 + ox, y2 + b, x2, y2 + b); win.bezierCurveTo(x2 - ox, y2 + b, x2 - a, y2 + oy, x2 - a, y2); win.stroke(); } //1 function one() { win.beginPath(); win.moveTo(x+27,y+7); win.lineTo(x+24,y+103); win.stroke(); } //2 function two() { win.beginPath(); win.moveTo(x+9,y+25); win.quadraticCurveTo(x+9,y+5,x+31.5,y+5); win.quadraticCurveTo(x+54,y+5,x+54,y+25); win.quadraticCurveTo(x+56,y+41,x+35,y+60); win.quadraticCurveTo(x+10,y+82,x+10,y+97); win.quadraticCurveTo(x+50,y+97,x+55,y+97); win.stroke(); } //3 function three() { win.beginPath(); win.moveTo(x+9,y+9); win.lineTo(x+46,y+9); win.quadraticCurveTo(x+32,y+35,x+24,y+44); win.quadraticCurveTo(x+49,y+41,x+46,y+71); win.quadraticCurveTo(x+46,y+100,x+26,y+100); win.quadraticCurveTo(x+7,y+100,x+7,y+85); win.stroke(); } //4 function four() { win.beginPath(); win.moveTo(x+39,y+100); win.lineTo(x+38,y+10); win.lineTo(x+30,y+10); win.lineTo(x+6,y+75); win.lineTo(x+49,y+75); win.stroke(); } //5 function five() { win.beginPath(); win.moveTo(x+46,y+9); win.lineTo(x+18,y+9); win.lineTo(x+11,y+51); win.quadraticCurveTo(x+21,y+41,x+30,y+41); win.quadraticCurveTo(x+49,y+41,x+49,y+73); win.quadraticCurveTo(x+49,y+101,x+30,y+101); win.quadraticCurveTo(x+12,y+100,x+9,y+82); win.stroke(); } //6 function six() { win.beginPath(); win.moveTo(x+33,y+7); win.quadraticCurveTo(x+10,y+35,x+10,y+69); win.quadraticCurveTo(x+9,y+98,x+30,y+98); win.quadraticCurveTo(x+53,y+97,x+53,y+69); win.quadraticCurveTo(x+52,y+43,x+33,y+43); win.quadraticCurveTo(x+10,y+47,x+10,y+69); win.stroke(); } //7 function seven() { win.beginPath(); win.moveTo(x+5,y+12); win.lineTo(x+52,y+12); win.lineTo(x+30,y+100); win.stroke(); } //8 function eight() { win.beginPath(); win.moveTo(x+31,y+8); win.quadraticCurveTo(x+12,y+8,x+12,y+27.5); win.quadraticCurveTo(x+12,y+47,x+31,y+47); win.quadraticCurveTo(x+53,y+47,x+53,y+75); win.quadraticCurveTo(x+53,y+102,x+31,y+102); win.quadraticCurveTo(x+9,y+102,x+9,y+75); win.quadraticCurveTo(x+12,y+47,x+31,y+47); win.quadraticCurveTo(x+50,y+47,x+50,y+27.5); win.quadraticCurveTo(x+50,y+8,x+31,y+8); win.stroke(); } //9 function nine() { win.beginPath(); win.moveTo(x + 24,y + 100); win.quadraticCurveTo(x+46,y+77,x+50,y+53); win.quadraticCurveTo(x+52,y+39,x+52,y+29); win.quadraticCurveTo(x+52,y+7,x+31,y+7); win.quadraticCurveTo(x+11,y+7,x+11,y+31); win.quadraticCurveTo(x+11,y+50,x+31,y+50); win.quadraticCurveTo(x+52,y+50,x+52,y+29); win.stroke(); } //数字n function number(n) { switch (n) { case 0: nolight(),theme(),zero(),wang(); break; case 1: nolight(),theme(),one(),wang(); break; case 2: nolight(),theme(),two(),wang(); break; case 3: nolight(),theme(),three(),wang(); break; case 4: nolight(),theme(),four(),wang(); break; case 5: nolight(),theme(),five(),wang(); break; case 6: nolight(),theme(),six(),wang(); break; case 7: nolight(),theme(),seven(),wang(); break; case 8: nolight(),theme(),eight(),wang(); break; case 9: nolight(),theme(),nine(),wang(); break; } } number(num); } setInterval("showTime(1,50)", 1000); </script> </body> </html> |
在做这玩意的时候我大部分时间都花在了用曲线画数字上了。。由于比较愚笨不知道有什么好的生成代码的办法，只好PS里画好以后再把锚点和定位点的坐标手动输入上去，花了不少时间，不过最终结果还是很满意的。
时钟程序本身是个很简单的JS程序。
这个IE8以下是绝对的没戏~
发表回复