Using canvas to draw led dot matrix clock

Core content: 1. The Digital LED dot matrix realization Way

The realization of the dot matrix is actually using a two-dimensional array, which uses the two-dimensional array of 7x10 and 4x10, when the array value is 1 o'clock to draw the red dot, when the array is 0 o'clock to draw the gray point, according to this method can also draw the English alphabet special symbols.

//number "9" [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,
            1], [1,1,0,0,0,1,1], [0,1,1,1,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,1,1,0,0,0,0] <span style= "White-space:pre" > & lt;/span>//Colon ":"             [0,0,0,0],             [0,0,0, 0]             [0,1,1,0],             [0,1,1,0],     ;         [0,0,0,0],             [0,0,0,0],         &N Bsp   [0,1,1,0],             [0,1,1,0],             [0,0,0,0]  ,             [0,0,0,0] <span style= "White-space:pre" > </span> 

2.canvas Drawing Circle

Fill round background color
Cxt.fillstyle = "rgb (20,20,20)";
Cxt.beginpath ();
Draw circles, x, y center coordinates, radius radii, Startradian, Endradian start radians, anticlockwise counterclockwise (default clockwise)
Cxt.arc (x, Y, RADIUS, Startradian , Endradian, anticlockwise);
Cxt.closepath ();
Cxt.fill ();

Canvas here is a hole, that is, when drawing a graphic remember to use the Beginpath and Closepath functions to wrap, otherwise drawing graphics parameters will be overwritten. Complete code

<! DOCTYPE html>
 

 
Lattice array var digit = [[[0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,0,1,1,0], [0,0,1,1,1,0,0]],//0 [[0,0,0 , 1,1,0,0], [0,1,1,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0
            , 0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [1,1,1,1,1,1,1]],//1 [[0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [ 0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,1,1,
            0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,0,0,1,1], [1,1,1,1,1,1,1]],//2 [ [1,1,1,1,1,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0]],//3 [[0,0,0,0,1,1,0], [0,0,0,1,1,1,0], [0,0,1,1, 1,1,0], [0,1,1,0,1,1,0], [1,1,0,0,1,1,0], [1,1,1,1,1,1,1], [0,0,0,0,1,1,0]
            , [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,1,1]],//4 [ [1,1,1,1,1,1,1], [1,1,0,0,0,0,0], [1,1,0,0,0,0,0], [1,1,1,1,1,1,0], [0,0 , 0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0
            , 1,1], [0,1,1,1,1,1,0]],//5 [[0,0,0,0,1,1,0], [0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],            [1,1,0,0,0,0,0], [1,1,0,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0]],//6 [[1,1,1 , 1,1,1,1], [1,1,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,0
            , 0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0]],//7 [[0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [ 1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,
            0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0]],//8 [
            [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1],
   [0,1,1,1,0,1,1],         [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]],//9 [[0,0,0,0], [0,0,0,0], [0,1,1,0], [0,1,1,0], [0,0,0,0], [0,0,0,0], [0,1,1,0], [0,1,1,0], [0, 0,
 0,0], [0,0,0,0]]//:];
 

 
var window_width = 800;
var window_height = 600;
var RADIUS = 8;
var margin_top = 60;

var margin_left = 30;
var endtime = new Date (2015,1,22,18,47,52);

var curshowtimeseconds = 0;
    Window.onload = function () {//Adaptive screen window_width = Document.body.clientWidth;

    window_height = Document.body.clientHeight;
    Margin_left = Math.Round (WINDOW_WIDTH/10);

    RADIUS = Math.Round (window_width * 4/5/108)-1;
    Margin_top = Math.Round (WINDOW_HEIGHT/5);
Time ();
};
    /** * Draw led dot Matrix digital/function render (CXT) {var curtime = new Date ();
    Cxt.clearrect (0,0,window_width, window_height);
    Cxt.fillstyle = "BLACK";  Cxt.fillrect (0,0,window_width, window_height);  Fill color x Y coordinate width high cxt.strokerect (0,0,window_width, window_height);
    Fill border x Y coordinate width high var hours = parseint (Curtime.gethours ());
    var minutes = parseint (Curtime.getminutes ());

    var seconds = parseint (Curtime.getseconds ());
   Renderdigit (Margin_left, Margin_top, parseint (HOURS/10), CXT); Renderdigit (Margin_left + 15* (radius+1), Margin_top, parseint (hours%10), CXT);
    Renderdigit (Margin_left + 30* (RADIUS + 1), margin_top, CXT);
    Renderdigit (Margin_left + 39* (radius+1), Margin_top, parseint (MINUTES/10), CXT);
    Renderdigit (Margin_left + 54* (radius+1), Margin_top, parseint (minutes%10), CXT);
    Renderdigit (Margin_left + 69* (radius+1), Margin_top, CXT);
    Renderdigit (Margin_left + 78* (radius+1), Margin_top, parseint (SECONDS/10), CXT);
Renderdigit (Margin_left + 93* (radius+1), Margin_top, parseint (seconds%10), CXT); function Renderdigit (x, y, num, cxt) {for (var i = 0; i < digit[num].length i + +) {for (var j = 0; J < Digit[num][i].length;
            J + +) {if (digit[num][i][j] = = 1) {Cxt.fillstyle = "red";
            else {Cxt.fillstyle = "rgb (20,20,20)";
            } cxt.beginpath (); Cxt.arc (x+j*2* (radius+1) + (radius+1), y+i*2*(radius+1) + (radius+1), RADIUS, 0, 2*math.pi);
            Cxt.closepath ();
        Cxt.fill (); /** * Start Timing * @return {[type]} [description]/function time () {var canvas = document.getElementById (' Can
    Vas ');
    var context = Canvas.getcontext ("2d");
    Canvas.width = window_width;
    Canvas.height = window_height;
    Context.clearrect (0,0,canvas.width, canvas.height);
        SetInterval (function () {render (context);
}, 50);
 }