Javascript digabungkan dengan Canvas untuk melaksanakan kemahiran clock_javascript bulat yang mudah

Saya belajar tentang elemen kanvas dalam HTML5 sebelum ini dan melaksanakan jam mudah untuk berlatih. Jam itu sendiri tidak rumit, dan tiada gambar digunakan untuk mencantikkannya Namun, walaupun burung pipit itu kecil dan mempunyai semua organ dalaman, saya akan berkongsi dengan anda di bawah:

Kesan demo:

kod html:

Salin kod Kod adalah seperti berikut:

Kod JS:

Salin kod Kod adalah seperti berikut:

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();
};

Kod ini melibatkan beberapa API elemen kanvas mudah, sila cuba

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang yang belajar kanvas.