Javascript digabungkan dengan Canvas untuk melaksanakan kemahiran clock_javascript bulat yang mudah

var Kanvas = {};
Canvas.cxt = document.getElementById('canvasId').getContext('2d');
Canvas.Point = fungsi(x, y){
Ini.x = x;
This.y = y;
};
/*Padam semua grafik pada kanvas*/
Canvas.clearCxt = ​​​​function(){
var saya = ini;
var canvas = me.cxt.canvas;
​ ​ me.cxt.clearRect(0,0, canvas.offsetWidth, canvas.offsetHeight);
};
/*jam*/
Canvas.Clock = function(){
var me = Kanvas,
          c = saya.cxt,
​​jejari = 150, /*jejari*/
skala = 20, /*Panjang skala*/
         minangle = (1/30)*Math.PI, /*radians dalam satu minit*/
hourangle = (1/6)*Math.PI, /*Arka satu jam*/
jamPanjang Tangan = jejari/2, /*panjang tangan jam*/
        minPanjang Tangan = jejari/3*2, /*Panjang tangan minit*/
        secHandLength = jejari/10*9, /*Panjang tangan kedua*/
center = new me.Point(c.canvas.width/2, c.canvas.height/2); /*pusat bulatan*/
/*Lukis pusat bulatan (tengah dail)*/
fungsi drawCenter(){
          c.save();
           c.terjemah(center.x, center.y);            c.fillStyle = 'hitam';
           c.beginPath();
          c.arc(0, 0, radius/20, 0, 2*Math.PI);
           c.closePath();
          c.fill();
          c.stroke();
           c.restore();
};
/*Lukis dail melalui penjelmaan koordinat*/
Fungsi drawBackGround(){
          c.save();
           c.terjemah(center.x, center.y); /*Transformasi terjemahan*/
          /*Skala lukisan*/
         fungsi drawScale(){
                c.moveTo(radius - skala, 0);
                 c.lineTo(radius, 0);         };
           c.beginPath();
          c.arc(0, 0, radius, 0, 2*Math.PI, true);
           c.closePath();
untuk (var i = 1; i <= 12; i ) {
            drawScale();
              c.putar(jam jam); /*Transformasi putaran*/
        };
/*Masa melukis (3,6,9,12)*/
c.font = " impak tebal 30px"
c.fillText("3", 110, 10);
          c.fillText("6", -7, 120);
          c.fillText("9", -120, 10);
          c.fillText("12", -16, -100);
          c.stroke();
           c.restore();
};
/*Lukis jarum jam (h: masa semasa (jam 24 jam))*/
This.drawHourHand = function(h){
h = h === 0? 24: h;
          c.save();
           c.terjemah(center.x, center.y);           c.rotate(3/2*Math.PI);
          c.putar(h*hourangle);
           c.beginPath();
           c.moveTo(0, 0);
           c.lineTo(hourHandLength, 0);
          c.stroke();
           c.restore();
};
/*Lukis jarum minit (m: minit semasa)*/
This.drawMinHand = function(m){
           m = m === 60: m;
          c.save();
           c.terjemah(center.x, center.y);           c.rotate(3/2*Math.PI);
          c.putar(m*minangle);
           c.beginPath();
           c.moveTo(0, 0);
           c.lineTo(minHandLength, 0);
          c.stroke();
           c.restore();
};
/*Lukis tangan kedua (s: saat semasa)*/
This.drawSecHand = function(s){
s = s === 0? 60: s;
          c.save();
           c.terjemah(center.x, center.y);           c.rotate(3/2*Math.PI);
          c.putar(s*minangle);
           c.beginPath();
           c.moveTo(0, 0);
           c.lineTo(secHandLength, 0);
          c.stroke();
           c.restore();
};
/*Lukis jam berdasarkan waktu tempatan*/
This.drawClock = function(){
        var saya = ini;
         draw function(){
          var date = new Date();
​​​​​ Canvas.clearCxt();
             drawBackGround();
           drawCenter();
              saya.drawHourHand(date.getHours() date.getMinutes()/60);
               saya.drawMinHand(date.getMinutes() date.getSeconds()/60);
              saya.drawSecHand(date.getSeconds());
}
       draw();
setInterval(draw, 1000);
};
};
var main = function(){
jam var = Canvas.Clock();
clock.drawClock();
};