Exemple de code pour dessiner une horloge animée sur toile-js tutoriel-php.cn

Exemple de code pour dessiner une horloge animée sur toile

巴扎黑

Libérer： 2017-07-24 14:31:30

original

1572 Les gens l'ont consulté

Aujourd'hui j'ai tout le temps, alors sur un coup de tête, j'aimerais partager avec vous un petit exemple de html5 j'espère montrer un petit cas aux "chaussures d'enfants" qui viennent d'apprendre le html5 ou qui ne l'ont pas appris. html5 et je suis sur le point de l'apprendre. J'espère que cela vous sera utile ! Quel maître ! S'il vous plaît, sautez-le !

J'ai essayé le terrain et dessiné une horloge, qui est légèrement différente de l'exemple MDN. Je le travaille moi-même !

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>Title</title>
</head><body onload="draw()">
<canvas id="canvas" width="300" height="300">
</canvas>
<script>
function init()
{
var ctx = document.getElementById('canvas').getContext('2d');

        ctx.save();
        ctx.clearRect(0,0,300,300);
        ctx.translate(150,150);
        ctx.lineWidth = 4;
        ctx.strokeStyle = "#a77";
        ctx.beginPath();
        ctx.arc(0,0,100,0,Math.PI*2,true);
        ctx.stroke();
        ctx.rotate(-Math.PI/2);//minute mark        ctx.save();for(var i = 0;i<60;i++){if(i%5 != 0){
                ctx.beginPath();
                ctx.moveTo(90,0);
                ctx.lineTo(94,0);
                ctx.stroke();
            }
            ctx.rotate(Math.PI/30);        }
        ctx.restore();//hour mark        ctx.save();for(var i=1;i<=12;i++){
            ctx.beginPath();
            ctx.moveTo(85,0);
            ctx.lineTo(95,0);
            ctx.stroke();
            ctx.rotate(Math.PI/6);        }
        ctx.restore();
        window.requestAnimationFrame(clock);
    }function clock() {var ctx = document.getElementById(&#39;canvas&#39;).getContext(&#39;2d&#39;);var now = new Date();var sec = now.getSeconds();var min = now.getMinutes();var hr = now.getHours();
        hr = hr>=12 ? hr-12 : hr;

        ctx.beginPath();
        ctx.arc(0,0,82,0,Math.PI*2,false);
        ctx.clip();
        ctx.clearRect(-90,-90,180,180);//write hour        ctx.save();
        ctx.lineWidth = 6;
        ctx.rotate(hr*Math.PI/6 + min*Math.PI/360 + sec*Math.PI/21600);        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(50,0);
        ctx.stroke();
        ctx.restore();//write minute        ctx.save();
        ctx.lineWidth = 3;
        ctx.rotate(min*Math.PI/30 + sec*Math.PI/1800);
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(65,0);
        ctx.stroke();
        ctx.restore();//write second        ctx.save();
        ctx.lineWidth = 1;
        ctx.rotate(sec*Math.PI/30);        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(80,0);
        ctx.stroke();
        ctx.restore();

        window.requestAnimationFrame(clock);
    }

    init();
    </script>
    </body>
    </html>

Copier après la connexion

Afficher le code

Voici un exemple de page de MDN : Cliquez-moi, cliquez-moi

La différence avec l'exemple de MDN est que MDN doit redessiner l'horloge entière à chaque fois, alors que mon approche sépare le cadran de l'horloge et les 3 aiguilles, et n'a besoin que de redessiner les aiguilles.

Je pense qu'il y a deux difficultés ici : la première est de calculer l'angle des aiguilles des heures et des minutes (lorsque l'aiguille des minutes bouge, l'aiguille des heures bouge également selon un certain angle). L'une est la zone où le pointeur est redessiné.

canvasRendingContext2D.rotate(angle)

Ici Math.PI est un demi-cercle, et le demi-cercle a 6 heures, donc Math .PI /6 est l'arc parcouru par l'aiguille des heures en une heure.

Parce que l'aiguille des minutes effectue un tour, l'aiguille des heures effectue 1/12 de tour, donc l'arc parcouru par l'aiguille des heures par rapport à la minute peut être calculé comme suit : Math.PI*2/60 *12 =>Math.PI /360

La trotteuse est la même.

Deuxièmement, redessinez le pointeur.

Si vous ne redessinez pas les aiguilles, après 1 minute, vous obtiendrez une horloge pleine d'aiguilles des secondes à 360 degrés. Comme ceci :