Maison > Article > interface Web > Effet d'animation de montre mécanique dynamique dessiné par JS+canvas

Effet d'animation de montre mécanique dynamique dessiné par JS+canvas

韦小宝original: 2018-01-23 11:13:451710parcourir

Cet article présente principalement l'effet animation de montre mécanique dynamique dessiné par JS+canvas, impliquant javascript combiné avec un canevas HTML5, calcul numérique simple et dynamique Dessiner compétences opérationnelles liées, les amis intéressés par JavaScript peuvent se référer à cet article

Cet article décrit l'effet d'animation dynamique de la montre mécanique dessiné par JS+canvas. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Exemple de code complet :

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>www.php.cn canvas时钟</title>
  <style>
    canvas {
      border: 1px solid red;
    }
  </style>
</head>
<body>
<canvas width="800" height="600"></canvas>
</body>
<script>
  function Clock(opt) {
    for (var key in opt) {
      this[key] = opt[key];
    }
    this.init();
  }
  Clock.prototype = {
    init: function () {
      var self = this;
      var ctx = this.ctx;
      this.timer = setInterval(function(){
        ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
        self.drawDial();
        self.drawDegreeScale();
        self.drawNumber();
        self.drawPointers();
      },1000);
    },
    drawDial: function () {
      var ctx = this.ctx;
      ctx.save();
      ctx.beginPath();
      ctx.lineWidth = this.clockDialW;
      ctx.strokeStyle = this.clockDialColor;
      ctx.arc(this.clockX, this.clockY, this.clockRadius, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.restore();
    },
    drawDegreeScale: function () {
      var ctx = this.ctx;
      var clockRadius = this.clockRadius;
      var clockX = this.clockX;
      var clockY = this.clockY;
      var bigDegreeScaleL = this.bigDegreeScaleL;
      var smallDegreeScale = this.smallDegreeScale;
      var startX, startY, endX, endY, radian;
      ctx.save();
      for (var i = 0; i < 12; i++) {
        radian = i * Math.PI / 6;
        endX = clockX + clockRadius * Math.cos(radian);
        endY = clockY + clockRadius * Math.sin(radian);
        if (radian % (Math.PI / 2) == 0) {
          startX = clockX + (clockRadius - bigDegreeScaleL) * Math.cos(radian);
          startY = clockY + (clockRadius - bigDegreeScaleL) * Math.sin(radian);
          ctx.lineWidth = this.bigDCWidth;
        } else {
          startX = clockX + (clockRadius - smallDegreeScale) * Math.cos(radian);
          startY = clockY + (clockRadius - smallDegreeScale) * Math.sin(radian);
          ctx.lineWidth = this.smallDCWidth;
        }
        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.lineTo(endX, endY);
        ctx.stroke();
        ctx.restore();
      }
    },
    drawNumber: function () {
      var ctx = this.ctx;
      var textX, textY, textRadian;
      var clockX = this.clockX;
      var clockY = this.clockY;
      var clockRadius = this.clockRadius;
      ctx.font = &#39;20px 微软雅黑&#39;;
      ctx.fillStyle = &#39;red&#39;;
      ctx.textAlign = &#39;center&#39;;
      ctx.textBaseline = &#39;middle&#39;;
      ctx.save();
      for (var i = 0; i < 12; i++) {
        textRadian = i * Math.PI / 6 - Math.PI/3;
        textX = clockX + (clockRadius - 40) * Math.cos(textRadian);
        textY = clockY + (clockRadius - 40) * Math.sin(textRadian);
        ctx.beginPath();
        ctx.fillText(i + 1, textX, textY);
      }
      ctx.restore();
    },
    drawPointers: function () {
      var date = new Date();
      var h = date.getHours();
      var m = date.getMinutes();
      var s = date.getSeconds();
      h = h % 12;
      var hRadian = 2 * Math.PI / 12 * h - Math.PI / 2;
      this.drawPoint(hRadian,30,&#39;red&#39;,8);
      var mRadian = 2 * Math.PI / 60 * m - Math.PI / 2;
      this.drawPoint(mRadian,50,&#39;blue&#39;,6);
      var sRadian = 2 * Math.PI / 60 * s - Math.PI / 2;
      this.drawPoint(sRadian,70,&#39;green&#39;,2);
    },
    drawPoint: function (radian, length,color,lineWidth) {
      var x = this.clockX + Math.cos(radian) * length;
      var y = this.clockY + Math.sin(radian) *　length;
      var ctx = this.ctx;
      ctx.save();
      ctx.beginPath();
      ctx.strokeStyle = color;
      ctx.lineWidth = lineWidth;
      ctx.moveTo(this.clockX,this.clockY);
      ctx.lineTo(x,y);
      ctx.stroke();
      ctx.restore();
    }
  };
</script>
<script>
  var canvas = document.querySelector(&#39;canvas&#39;);
  var ctx = canvas.getContext(&#39;2d&#39;);
  var clock = new Clock({
    ctx: this.ctx,
    clockRadius: 150,
    clockX: 300,
    clockY: 300,
    clockDialW: 6,
    clockDialColor: &#39;blue&#39;,
    bigDegreeScaleL: 20,
    bigDCWidth: 6,
    smallDegreeScale: 10,
    smallDCWidth: 4
  });
</script>
</html>

Ce qui précède est tout le contenu de cet article, j'espère que cela pourra aider tout le monde à apprendre Javascript ! !

Recommandations associées :

Analyse du mécanisme de conversion implicite du double signe égal en Javascript

Définition et utilisation d'une liste doublement chaînée en JavaScript

Explication détaillée de l'effet sonore de l'alarme à l'aide de JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html5 JS canvas

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de code d'arbre de recherche binaire d'algorithme javascriptArticle suivant：Exemple de code d'arbre de recherche binaire d'algorithme javascript

Articles Liés

Voir plus