Use canvas painting clock

Today saw the H5 canvas, practice under use. To be perfect. . .

 

 

class Clock {
    constructor(canvas) {
        this.canvas = canvas;
    }

    draw() {
        let ctx = this.canvas.getContext("2d");
        
        ctx.setDefault = function() {
            const default_strokeStyle = "#000000";
            this.strokeStyle = default_strokeStyle; 
        }

        this.drawClockDialPlate(ctx);
        this.drawClockDial(ctx);

    }

    // 画表盘
    drawClockDialPlate(ctx) {
        ctx.beginPath();
        ctx.strokeStyle = "Blue" ;
        ctx.lineWidth the this = 2 ; 
        ctx.arc ( 400, 300, 200 is, 0, 2 * Math.PI, to false ); 
        ctx.stroke (); 

        ctx.setDefault (); 
    } 

    // Videos dial 
    drawClockDial (ctx) { 

        ctx.beginPath (); 
        ctx.translate ( 400, 300 ); 
        ctx.lineWidth =. 1 ; 

        the let Scale = 30; // every hour 30 degrees corresponding to 

        the let RG = ctx.createRadialGradient (0, 0, 180 [, 0, 0 , 185 ); 
        rg.addColorStop ( 0.9, .canvas.style.backgroundColor); 
        rg.addColorStop (. 1, "Blue" ); 
        ctx.strokeStyle = RG; 

        for (the let AN = 0; AN <360; AN + = Scale) { 

            // first sub Videos 
            ctx.moveTo (0, 0 ); 
            ctx.lineTo ( 200 is , 0 ); 
            ctx.rotate (scale * Math.PI / 180 [ ); 
        } 

        ctx.stroke (); 

        // repeat Videos obvious cause hour scale 
        ctx.beginPath (); 
        scale =. 6; // every minute corresponds 6 of 
        RG ctx.createRadialGradient = (0, 0, 190, 0, 0, 195  ); 
        rg.addColorStop (0.9, the this .canvas.style.backgroundColor); 
        rg.addColorStop ( . 1, "Blue" ); 
        ctx.strokeStyle = RG; 
        
        for (the let AN = 0; AN <360; AN + = Scale) { 
 
            // repeat Painting cause obvious hour markers 
            IF (AN% 30 == 0! ) { 
                ctx.moveTo ( 0, 0 ); 
                ctx.lineTo ( 200 is, 0 ); 
            } 

            ctx.rotate (scale * Math.PI / 180 [ ); 

        } 
        
        CTX .stroke (); 

        ctx.setDefault (); 
        ctx.translate ( -400, -300); // reduction
     } 

} 

the let Canvas = document.createElement ( "Canvas" );
let style = canvas.style;
[canvas.width, canvas.height] = [800, 600];
[style.backgroundColor, style.position, style.zIndex] = ["green", "absolute", 1]
document.body.prepend(canvas);

new Clock(canvas).draw();