canvas原型鐘錶效果程式碼例項

admin發表於2018-05-27

本章節分享一段程式碼例項。它實現原型鐘錶效果。

並且此鐘錶能夠獲取本地的時間自動實現走動效果，是一個比較好的參考學習例子。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
.canvas{
  margin-left:20px;
  margin-top:20px;
  border:solid 1px;
}
</style>
<script type= "text/javascript">
window.onload=function(){
  var Canvas = {};
  Canvas.cxt = document.getElementById('canvasId').getContext('2d');
  Canvas.Point = function(x, y){
    this.x = x;
    this.y = y;
  };
  /*擦除canvas上的所有圖形*/
  Canvas.clearCxt = function(){
    var me = this;
    var canvas = me.cxt.canvas;
    me.cxt.clearRect(0,0, canvas.offsetWidth, canvas.offsetHeight);
  };
  /*時鐘*/
  Canvas.Clock = function(){
    var me = Canvas,
        c = me.cxt,
        radius = 150, /*半徑*/
        scale = 20, /*刻度長度*/
        minangle = (1/30)*Math.PI, /*一分鐘的弧度*/
        hourangle = (1/6)*Math.PI, /*一小時的弧度*/
        hourHandLength = radius/2, /*時針長度*/
        minHandLength = radius/3*2, /*分針長度*/
        secHandLength = radius/10*9, /*秒針長度*/
        center = new me.Point(c.canvas.width/2, c.canvas.height/2); /*圓心*/
    /*繪製圓心（錶盤中心）*/
    function drawCenter(){
      c.save();
      c.translate(center.x, center.y); 
      c.fillStyle = 'black';
      c.beginPath();
      c.arc(0, 0, radius/20, 0, 2*Math.PI);
      c.closePath();
      c.fill();
      c.stroke();
      c.restore();
    };
    /*通過座標變換繪製錶盤*/
    function drawBackGround(){
      c.save();
      c.translate(center.x, center.y); /*平移變換*/
      /*繪製刻度*/
      function drawScale(){
        c.moveTo(radius - scale, 0);
        c.lineTo(radius, 0); 
      };
      c.beginPath();
      c.arc(0, 0, radius, 0, 2*Math.PI, true);
      c.closePath();
      for (var i = 1; i <= 12; i++) {
        drawScale();
        c.rotate(hourangle); /*旋轉變換*/
      };
      /*繪製時間(3,6,9,12)*/
      c.font = " bold 30px impack"
      c.fillText("3", 110, 10);
      c.fillText("6", -7, 120);
      c.fillText("9", -120, 10);
      c.fillText("12", -16, -100);
      c.stroke();
      c.restore();
    };
    /*繪製時針(h: 當前時（24小時制）)*/
    this.drawHourHand = function(h){
      h = h === 0? 24: h;
      c.save();
      c.translate(center.x, center.y); 
      c.rotate(3/2*Math.PI);
      c.rotate(h*hourangle);
      c.beginPath();
      c.moveTo(0, 0);
      c.lineTo(hourHandLength, 0);
      c.stroke();
      c.restore();
    };
    /*繪製分針（m: 當前分）*/
    this.drawMinHand = function(m){
        m = m === 0? 60: m;
        c.save();
        c.translate(center.x, center.y); 
        c.rotate(3/2*Math.PI);
        c.rotate(m*minangle);
        c.beginPath();
        c.moveTo(0, 0);
        c.lineTo(minHandLength, 0);
        c.stroke();
        c.restore();
    };
    /*繪製秒針（s：當前秒）*/
    this.drawSecHand = function(s){
        s = s === 0? 60: s;
        c.save();
        c.translate(center.x, center.y); 
        c.rotate(3/2*Math.PI);
        c.rotate(s*minangle);
        c.beginPath();
        c.moveTo(0, 0);
        c.lineTo(secHandLength, 0);
        c.stroke();
        c.restore();
    };
    /*依據本機時間繪製時鐘*/
    this.drawClock = function(){
        var me = this;
        function draw(){
           var date = new Date();
           Canvas.clearCxt();
           drawBackGround();
           drawCenter();
           me.drawHourHand(date.getHours() + date.getMinutes()/60);
           me.drawMinHand(date.getMinutes() + date.getSeconds()/60);
           me.drawSecHand(date.getSeconds());
        }
        draw();
        setInterval(draw, 1000);
    };  
};
 var main = function(){
    var clock = new Canvas.Clock();
    clock.drawClock();
};var Canvas = {};
Canvas.cxt = document.getElementById('canvasId').getContext('2d');
Canvas.Point = function(x, y){
    this.x = x;
    this.y = y;
};
/*擦除canvas上的所有圖形*/
Canvas.clearCxt = function(){
    var me = this;
    var canvas = me.cxt.canvas;
       me.cxt.clearRect(0,0, canvas.offsetWidth, canvas.offsetHeight);
};
/*時鐘*/
Canvas.Clock = function(){
    var me = Canvas,
        c = me.cxt,
        radius = 150, /*半徑*/
        scale = 20, /*刻度長度*/
        minangle = (1/30)*Math.PI, /*一分鐘的弧度*/
        hourangle = (1/6)*Math.PI, /*一小時的弧度*/
        hourHandLength = radius/2, /*時針長度*/
        minHandLength = radius/3*2, /*分針長度*/
        secHandLength = radius/10*9, /*秒針長度*/
        center = new me.Point(c.canvas.width/2, c.canvas.height/2); /*圓心*/
    /*繪製圓心（錶盤中心）*/
    function drawCenter(){
        c.save();
        c.translate(center.x, center.y); 
        c.fillStyle = 'black';
        c.beginPath();
        c.arc(0, 0, radius/20, 0, 2*Math.PI);
        c.closePath();
        c.fill();
        c.stroke();
        c.restore();
    };
    /*通過座標變換繪製錶盤*/
    function drawBackGround(){
        c.save();
        c.translate(center.x, center.y); /*平移變換*/
        /*繪製刻度*/
        function drawScale(){
           c.moveTo(radius - scale, 0);
           c.lineTo(radius, 0); 
        };
        c.beginPath();
        c.arc(0, 0, radius, 0, 2*Math.PI, true);
        c.closePath();
        for (var i = 1; i <= 12; i++) {
           drawScale();
           c.rotate(hourangle); /*旋轉變換*/
        };
        /*繪製時間(3,6,9,12)*/
        c.font = " bold 30px impack"
        c.fillText("3", 110, 10);
        c.fillText("6", -7, 120);
        c.fillText("9", -120, 10);
        c.fillText("12", -16, -100);
        c.stroke();
        c.restore();
    };
    /*繪製時針(h: 當前時（24小時制）)*/
    this.drawHourHand = function(h){
        h = h === 0? 24: h;
        c.save();
        c.translate(center.x, center.y); 
        c.rotate(3/2*Math.PI);
        c.rotate(h*hourangle);
        c.beginPath();
        c.moveTo(0, 0);
        c.lineTo(hourHandLength, 0);
        c.stroke();
        c.restore();
    };
    /*繪製分針（m: 當前分）*/
    this.drawMinHand = function(m){
        m = m === 0? 60: m;
        c.save();
        c.translate(center.x, center.y); 
        c.rotate(3/2*Math.PI);
        c.rotate(m*minangle);
        c.beginPath();
        c.moveTo(0, 0);
        c.lineTo(minHandLength, 0);
        c.stroke();
        c.restore();
    };
    /*繪製秒針（s：當前秒）*/
    this.drawSecHand = function(s){
        s = s === 0? 60: s;
        c.save();
        c.translate(center.x, center.y); 
        c.rotate(3/2*Math.PI);
        c.rotate(s*minangle);
        c.beginPath();
        c.moveTo(0, 0);
        c.lineTo(secHandLength, 0);
        c.stroke();
        c.restore();
    };
    /*依據本機時間繪製時鐘*/
    this.drawClock = function(){
      var me = this;
      function draw(){
        var date = new Date();
        Canvas.clearCxt();
        drawBackGround();
        drawCenter();
        me.drawHourHand(date.getHours() + date.getMinutes()/60);
        me.drawMinHand(date.getMinutes() + date.getSeconds()/60);
        me.drawSecHand(date.getSeconds());
      }
      draw();
      setInterval(draw, 1000);
    };  
  };
  var main = function(){
    var clock = new Canvas.Clock();
    clock.drawClock();
  };
  main()
}
</script>
</head>
<body>
<canvas class="canvas" id="canvasId" width='500px' height='400px'></canvas>
</body>
</html>

canvas繪製鐘錶效果程式碼例項
2017-02-13
Canvas
canvas實現的圓形鐘錶效果程式碼例項
2017-02-10
Canvas
js鐘錶效果程式碼例項
2017-04-17
JS
canvas繪製圓形鐘錶程式碼例項
2018-05-11
Canvas
canvas實現的鐘表效果程式碼例項
2017-02-10
Canvas
javascript圓形電子鐘錶效果程式碼例項
2017-04-12
JavaScript
canvas火焰效果程式碼例項
2017-02-28
Canvas
js秒錶效果程式碼例項
2017-04-13
JS
canvas字母雨效果程式碼例項
2017-04-12
Canvas
canvas載入效果程式碼例項
2018-07-09
Canvas
canvas擺動效果程式碼例項
2017-02-26
Canvas
javascript圓形鐘錶程式碼例項
2017-04-13
JavaScript
jquery自動走動的圓形鐘錶效果程式碼例項
2017-04-04
jQuery
canvas水位進度效果程式碼例項
2018-02-11
Canvas
canvas氣泡上浮效果程式碼例項
2018-03-19
Canvas
canvas田字格效果程式碼例項
2017-02-10
Canvas
canvas繪製圓環效果程式碼例項
2017-02-21
Canvas
canvas螞蟻線效果程式碼例項
2018-01-09
Canvas
canvas模擬彈幕效果程式碼例項
2018-01-23
Canvas
canvas繪製箭頭效果程式碼例項
2018-04-02
Canvas
canvas繪製夜空小屋效果程式碼例項
2017-02-17
Canvas
canvas流星劃過星空效果程式碼例項
2017-02-13
Canvas
canvas繪製橢圓效果程式碼例項
2017-02-20
Canvas
css3和js實現的圓形鐘錶效果程式碼例項
2017-04-15
CSSS3JS
canvas實現的驗證碼效果程式碼例項
2017-02-21
Canvas
canvas繪製魚吃豆效果程式碼例項
2017-03-26
Canvas
canvas實現煙花燃放效果程式碼例項
2017-03-23
Canvas
canvas繪製雪花飄落效果程式碼例項
2017-03-19
Canvas
canvas實現的鋸齒效果程式碼例項
2017-02-11
Canvas
利用canvas實現的驗證碼效果程式碼例項
2017-02-13
Canvas
canvas實現的雪花飄落效果程式碼例項
2017-02-17
Canvas
canvas實現的藍色雨滴效果程式碼例項
2017-02-17
Canvas
canvas實現的彈力小球效果程式碼例項
2017-02-10
Canvas
canvas 例項之鬧鐘
2020-12-16
Canvas
canvas刮刮樂程式碼例項
2018-07-06
Canvas
canvas繪製圓盤走動鐘錶效果
2018-09-09
Canvas
實時變化的時鐘效果程式碼例項
2017-04-12
canvas實現的七巧板效果程式碼例項
2017-02-17
Canvas

canvas原型鐘錶效果程式碼例項

相關文章