JS利用html5实现loadding动态加载效果代码实例

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > JS利用html5实现loadding动态加载效果代码实例

本章节分享一段代码，它实现的动态loadding加载效果，通过javascript结合html5实现的，有兴趣的朋友可以参考一下。

代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="https://www.51qianduan.com/" />  
<title>51前端</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>

代码描述：JS利用html5 loadding动态加载效果。JS利用html5实现loadding动态加载效果代码实例

下载全部收藏

312 416

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册