Canvas und JS implementieren dynamische Uhranimationen

Dieses Mal werde ich Ihnen Canvas und JS zur Implementierung dynamischer Uhrenanimationen vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung dynamischer Uhrenanimationen mit Canvas und JS? Hier ist ein praktischer Fall.

Werfen wir zunächst einen Blick auf den Laufeffekt:

Vollständiger Beispielcode:

nbsp;html>


  <meta>
  <title>canvas时钟</title>
  <style>
    canvas {
      border: 1px solid red;
    }
  </style>


<canvas></canvas>

<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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Plug-in „InstantClick“ zur Optimierung der Seitenladegeschwindigkeit

Detaillierte Erläuterung der Verwendung des Vorlade-InstantClick

Wie richte ich InstantClick so ein, dass es mit MathJax und Baidu Statistics kompatibel ist?

Das obige ist der detaillierte Inhalt vonCanvas und JS implementieren dynamische Uhranimationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!