HTML Canvas Animation Clock

Description

HTML Canvas Animation Clock

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  var Animation = function(canvasId) {
    this.canvas = document.getElementById(canvasId);
    this.context = this.canvas.getContext("2d");
    this.t = 0;//  w  ww .  java 2  s .  com
    this.timeInterval = 0;
    this.startTime = 0;
    this.lastTime = 0;
    this.frame = 0;
    this.animating = false;

    // provided by Paul Irish
    window.requestAnimFrame = (function(callback) {
      return window.requestAnimationFrame
          || window.webkitRequestAnimationFrame
          || window.mozRequestAnimationFrame
          || window.oRequestAnimationFrame
          || window.msRequestAnimationFrame || function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
    })();
  };

  Animation.prototype.getContext = function() {
    return this.context;
  };

  Animation.prototype.getCanvas = function() {
    return this.canvas;
  };

  Animation.prototype.clear = function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  };

  Animation.prototype.setDrawStage = function(func) {
    this.drawStage = func;
  };

  Animation.prototype.getFrame = function() {
    return this.frame;
  };

  Animation.prototype.start = function() {
    this.animating = true;
    var date = new Date();
    this.startTime = date.getTime();
    this.lastTime = this.startTime;

    if (this.drawStage !== undefined) {
      this.drawStage();
    }

    this.animationLoop();
  };

  Animation.prototype.stop = function() {
    this.animating = false;
  };


  Animation.prototype.animationLoop = function() {
    var that = this;

    this.frame++;
    var date = new Date();
    var thisTime = date.getTime();
    this.timeInterval = thisTime - this.lastTime;
    this.t += this.timeInterval;
    this.lastTime = thisTime;

    if (this.drawStage !== undefined) {
      this.drawStage();
    }

    if (this.animating) {
      requestAnimFrame(function() {
        that.animationLoop();
      });
    }
  };
              window.onload = function(){
                var anim = new Animation("myCanvas");
                var canvas = anim.getCanvas();
                var context = anim.getContext();
                
                var clockRadius = 75;
                
                anim.setDrawStage(function(){
                
                    // update
                    var date = new Date();
                    var hours = date.getHours();
                    var minutes = date.getMinutes();
                    var seconds = date.getSeconds();
                    
                    hours = hours > 12 ? hours - 12 : hours;
                    
                    var hour = hours + minutes / 60;
                    var minute = minutes + seconds / 60;
          
          // clear
          this.clear();
                    
          // draw
                    var context = anim.getContext();
                    context.save();
                    context.translate(canvas.width / 2, canvas.height / 2);
                    
                    // draw clock body
                    context.beginPath();
                    context.arc(0, 0, clockRadius, 0, Math.PI * 2, true);
                    
                    
                    // draw numbers  
                    context.font = "16pt Calibri";
                    context.fillStyle = "#024F8C";
                    context.textAlign = "center";
                    context.textBaseline = "middle";
                    for (var n = 1; n <= 12; n++) {
                        var theta = (n - 3) * (Math.PI * 2) / 12;
                        var x = clockRadius * 0.8 * Math.cos(theta);
                        var y = clockRadius * 0.8 * Math.sin(theta);
                        context.fillText(n, x, y);
                    }
                    
                    context.save();
                    
                    // draw clock rim
                    context.lineWidth = 3;
                    context.strokeStyle = "#005EA8";
                    context.stroke();
                    
                    context.restore();
                    
                    // draw hour hand
                    context.save();
                    var theta = (hour - 3) * 2 * Math.PI / 12;
                    context.rotate(theta);
                    context.beginPath();
                    context.moveTo(-10, -4);
                    context.lineTo(-10, 4);
                    context.lineTo(clockRadius * 0.6, 1);
                    context.lineTo(clockRadius * 0.6, -1);
                    context.fill();
                    context.restore();
                    
                    // minute hand
                    context.save();
                    var theta = (minute - 15) * 2 * Math.PI / 60;
                    context.rotate(theta);
                    context.beginPath();
                    context.moveTo(-10, -3);
                    context.lineTo(-10, 3);
                    context.lineTo(clockRadius * 0.9, 1);
                    context.lineTo(clockRadius * 0.9, -1);
                    context.fill();
                    context.restore();
                    
                    // second hand
                    context.save();
                    var theta = (seconds - 15) * 2 * Math.PI / 60;
                    context.rotate(theta);
                    context.beginPath();
                    context.moveTo(-10, -2);
                    context.lineTo(-10, 2);
                    context.lineTo(clockRadius * 0.8, 1);
                    context.lineTo(clockRadius * 0.8, -1);
                    context.fillStyle = "red";
                    context.fill();
                    context.restore();
                    
                    context.restore();
                });
                
                anim.start();
            };
</script>
</head>
<body>
  <canvas id="myCanvas" width="600" height="350"
    style="border: 1px solid black;">
        </canvas>
</body>
</html>



PreviousNext

Related