Dynamischer mechanischer Uhrenanimationseffekt, gezeichnet von JS+canvas-js-Tutorial-php.cn

Dynamischer mechanischer Uhrenanimationseffekt, gezeichnet von JS+canvas

韦小宝

Freigeben： 2018-01-23 11:13:45

Original

1703 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der von JS+Canvas gezeichnete Effekt der dynamischen mechanischen Uhr Animation vorgestellt, der Javascript in Kombination mit HTML5-Canvas, einfacher numerischer Berechnung und dynamischem umfasst Zeichnen verwandte Bedienfähigkeiten, Freunde, die sich für JavaScript interessieren, können auf diesen Artikel verweisen

Dieser Artikel beschreibt den dynamischen mechanischen Uhranimationseffekt, der von JS + Canvas gezeichnet wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Vollständiger Beispielcode:

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

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er kann jedem beim Lernen helfen JavaScript! !

Verwandte Empfehlungen:

Analyse des impliziten Konvertierungsmechanismus von doppelten Gleichheitszeichen in Javascript

Definition und Verwendung doppelt verknüpfter Listen in JavaScript

Detaillierte Erklärung des Alarmtoneffekts mit JavaScript

Das obige ist der detaillierte Inhalt vonDynamischer mechanischer Uhrenanimationseffekt, gezeichnet von JS+canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!