利用html5實現的loadding動態載入效果

antzone發表於2017-03-22
HTML

本章節分享一段程式碼，它實現的動態loadding載入效果，通過javascript結合html5實現的，有興趣的朋友可以參考一下。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<script type="text/javascript">
window.onload=function(){
  var Loading = function (canvas, options) {
    this.canvas = document.getElementById(canvas);
    this.options = options;
  };
  Loading.prototype={
    constructor: Loading,
    show: function(){
      var canvas = this.canvas,
      begin = this.options.begin,
      old = this.options.old,
      lineWidth = this.options.lineWidth,
      canvasCenter = {x: canvas.width / 2, y: canvas.height / 2},
      ctx = canvas.getContext("2d"),
      color = this.options.color,
      num = this.options.num,
      angle = 0,
      lineCap = this.options.lineCap,
      CONST_PI = Math.PI * (360 / num) / 180;
      window.timer = setInterval(function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for(var i = 0; i < num; i += 1){
          ctx.beginPath();
          ctx.strokeStyle = color[num - 1 - i];
          ctx.lineWidth = lineWidth;
          ctx.lineCap= lineCap;
          ctx.moveTo(canvasCenter.x 
       + Math.cos(CONST_PI * i + angle) * begin, canvasCenter.y 
       + Math.sin(CONST_PI * i + angle) * begin);
          ctx.lineTo(canvasCenter.x 
       + Math.cos(CONST_PI * i + angle) * old, canvasCenter.y 
       + Math.sin(CONST_PI * i + angle) * old);
          ctx.stroke();
          ctx.closePath();
        }
        angle += CONST_PI;
        console.log(angle)
      },50);
    },
    hide: function () {
      clearInterval(window.timer);
    }
  }; 
  (function(){
    var options = {
      num : 8,
      begin: 20,
      old: 40,
      lineWidth: 10,
      lineCap: "round",
      color: ["rgb(0, 0, 0)", 
   "rgb(20, 20, 20)",
   "rgb(40, 40, 40)", 
   "rgb(60, 60, 60)",
   "rgb(80, 80, 80)", 
   "rgb(100, 100, 100)", 
   "rgb(120, 120, 120)", 
   "rgb(140, 140, 140)"]
    };
    var loading = new Loading("canvas", options);
    loading.show();
  }());
}
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

以上程式碼實現了動態載入等待效果，因為是結合html5實現的自然就會有相容性問題。

相關文章