canvas小球旋轉loadding載入效果

antzone發表於2017-03-14
Canvas

分享一段程式碼例項，它實現了利用canvas繪製小球旋轉loadding載入效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function loading() {
  //獲取canvas的上下文
  var canvas = document.getElementById("loading"),
    ctx = canvas.getContext("2d"),
    w = canvas.width,
    h = canvas.height,
    x = w / 2,
    y = h / 2, //表示是canvas圖示中心
    radius = 30;
 
 
 
  //最外圍先畫一個矩形
  ctx.fillStyle = "#000"; //樣式填充
  ctx.fillRect(0, 0, w, h); //引數分別是:(x,y,w,h):x矩形起點橫座標,y矩形起點縱座標,w矩形長度,h矩形高度
 
  //開始畫裡邊的loading圓形
  var r = [3, 4, 4.5, 5, 6, 7]; //半徑
  var angle = [10, 25, 45, 65, 90, 120]; //弧度
  var alpha = [0.25, 0.35, 0.45, 0.65, 0.8, 1]; //透明度
  var x1 = [],
    y1 = [];
 
  setInterval(function() { //定時器
    //清空畫布
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, w, h);
 
    //定義x座標陣列,和y座標陣列
    x1 = [];
    y1 = [];
 
    //for迴圈開始畫圓
    for (var index = 0; index < r.length; index++) {
      if (angle[index] >= 360) {
        angle[index] = 0;
      }
      //開始畫圓,一共是六個圓,並且銜接到一塊,半徑逐漸減小的圓形
      ctx.beginPath(); //起始一條路徑,或重置當前路徑
      ctx.font = "1rem sans-serif";
      ctx.fillStyle = "#ccc"; //設定要填充的樣式
      x1.push(x + radius * Math.cos(angle[index] * Math.PI / 180)); //向陣列中新增資料
      y1.push(y + radius * Math.sin(angle[index] * Math.PI / 180)); //因為六個圓的圓心都要在一條圓的外圍上
      ctx.arc(x1[index], y1[index], r[index], 0, 2 * Math.PI, true);
      ctx.closePath();
      ctx.fill();
 
      //弧度+5
      angle[index] += 5;
    }
  }, 25);
}
 
window.onload = function() {
  loading();
}
</script>
</head>
<body>
<canvas id="loading"></canvas>
</body>
</html>

相關文章