HTML5-Canvas plotting and animation of dazzling clock Effects

HTML5-Canvas plotting and animation of dazzling clock Effects

<Script type = "text/javascript" src = "digit. js "> </script> <script type =" text/javascript "> var WINDOW_WIDTH = 1024; var WINDOW_HEIGHT = 600; var MARGIN_TOP = 60; var MARGIN_LEFT = 30; // store the color ball var bils = []; const colors = ["#33B5E5", "# 0099CC", "# AA66CC", "#669900", "# FFBB33 ", "# FF8800", "# FF4444", "CC0000"]; var digit = [[[, 0], [,], [, 1], [, 1], [, 1], [, 1], [1, 1, 0, 0, 0 ,], [, 1], [,], [, 0], // 0 [[, 0], [, 0], [, 0,, 0], [, 0], [, 0], [, 0,, 0], [, 0], [, 1], // 1 [[, 0], [, 1], [, 1], [, 0], [, 0], [, 0], [, 0], [, 0], [, 1], [, 1], // 2 [, 1, ], [, 1], [,], [, 0, 0], [, 0], [, 1], [, 1, 1], [, 0], // 3 [[, 0], [,], [, 0], [,], [,], [, 1],, 1], // 4 [[, 1], [, 0], [, 0, 0], [, 0], [, 1], [, 1], [, 1], [, 1], [, 1], [, 0], // 5 [[, 0], [, 0, 0, 0, 0], [, 0, 0], [, 0], [, 1], [, 0,, 1], [, 1], [, 1], [, 0], // 6 [[, 1], [, 1,, 0], [, 0], [, 0], [, 0,, 0], [, 0], [, 1, ,], // 7 [[, 0], [, 1], [, 1], [, 1], [,], [, 1], [, 1], [, 1], [, 1], [,], // 8,, 0], [, 1], [, 1], [, 1, 0, 1], [0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 1], [0, 0, 0, 0], [0, 0,, 0], [, 0], // 9 [[,], [,], [,], [,], [,], [, 0, 0], [,], [,], [,], [,] //:]; var r = 8; // circle radius window. onload = function () {var canvas = document. getElementById ("canvas"); var context = canvas. getContext ("2d"); canvas. width = WINDOW_WIDTH; canvas. height = WINDOW_HEIGHT; window. setInterval (function () {var curr = new Date (); var curHours = curr. getHours (); var curMinutes = curr. getMinutes (); var curSeconds = curr. getSeconds (); // Add the color ball if (preSeconds! = CurSeconds) {if (parseInt (curHours/10 )! = ParseInt (preHours/10) {addBall (MARGIN_LEFT, MARGIN_TOP, parseInt (curHours/10);} if (parseInt (curHours % 10 )! = ParseInt (preHours % 10) {addBall (MARGIN_LEFT + 15 * (r + 1), MARGIN_TOP, parseInt (curHours % 10 ));} if (parseInt (curMinutes/10 )! = ParseInt (preMinutes/10) {addBall (MARGIN_LEFT + 39 * (r + 1), MARGIN_TOP, parseInt (curMinutes/10 ));} if (parseInt (curMinutes % 10 )! = ParseInt (preMinutes % 10) {addBall (MARGIN_LEFT + 54 * (r + 1), MARGIN_TOP, parseInt (curMinutes % 10 ));} if (parseInt (curSeconds/10 )! = ParseInt (preSeconds/10) {addBall (MARGIN_LEFT + 78 * (r + 1), MARGIN_TOP, parseInt (curSeconds/10 ));} if (parseInt (curSeconds % 10 )! = ParseInt (preSeconds % 10) {addBall (MARGIN_LEFT + 93 * (r + 1), MARGIN_TOP, parseInt (curSeconds % 10);} render (context );}, 50);} // Add the ball (color ball on the numeric num, x, y: vertex coordinate in the upper left corner of the digital box container) function addBall (x, y, num) {for (var I = 0; I = WINDOW_HEIGHT) {bils [I]. y = WINDOW_HEIGHT-r; bils [I]. vy =-bils [I]. vy * 0.6 ;}}var preHours; var preMinutes; var preSeconds; // render the entire canvas function render (context) {context. clearRect (0, 0, WINDOW_WIDTH, WINDOW_HEIGHT) var now = new Date (); var hours = now. getHours (); var minutes = now. getMinutes (); var seconds = now. getSeconds (); preHours = hours; preMinutes = minutes; preSeconds = seconds; // --- renderDigit (MARGIN_LEFT, MARGIN_TOP, parseInt (hours/10), context ); renderDigit (MARGIN_LEFT + 15 * (r + 1), MARGIN_TOP, hours % 10, context); renderDigit (MARGIN_LEFT + 30 * (r + 1), MARGIN_TOP, 10, context ); // --- renderDigit (MARGIN_LEFT + 39 * (r + 1), MARGIN_TOP, parseInt (minutes/10), context); renderDigit (MARGIN_LEFT + 54 * (r + 1 ), MARGIN_TOP, minutes % 10, context); renderDigit (MARGIN_LEFT + 69 * (r + 1), MARGIN_TOP, 10, context ); // --- seconds renderDigit (MARGIN_LEFT + 78 * (r + 1), MARGIN_TOP, parseInt (seconds/10), context); renderDigit (MARGIN_LEFT + 93 * (r + 1 ), MARGIN_TOP, seconds % 10, context); // --- draw the renderbils ball (context); // --- change the ball path updatebils ();} // render each number function renderDigit (x, y, num, context) {context. fillStyle = "green"; for (var I = 0; I