canvas模擬彈幕效果程式碼例項

admin發表於2018-01-23
Canvas
關於彈幕效果大家一定不會陌生，現在各大視訊網站基本都實現了這樣的功能。

有效增強了互動效果，下面就分享一段程式碼例項，它使用canvas實現了此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}
body {
  background: #bcbcbc;
}
.main {
  width: 600px;
  height: 400px;
  margin: 0 auto;
  position: relative;
}
.main img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
}
#canvas {
  display: block;
  background: #000;
}
</style>
</head>
<body>
<div class="main">
  <canvas id="canvas"></canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var width = 600;
var height = 400;
//宣告顏色陣列使每句話顏色都不一樣！
var colorArr = ["yellow", "pink", "orange", "red", "green"];
var textArr = [
  "螞蟻部落歡迎您",
  "只有努力才會有美好的未來",
  "div教程真的不錯",
  "正規表示式教程還需要完善",
  "css3教程的演示效果很好",
  "每一天都是新的大家好好珍惜"
]
canvas.width = width;
canvas.height = height;
ctx.font = "20px Courier New";
//初始的每一句話的左邊距離canvas左邊的距離
var numArrL = [80, 100, 5, 300, 500, 430];
//初始的每一句話的上邊距離canvas上邊的距離
var numArrT = [80, 100, 20, 300, 380, 210];
setInterval(function () {
  //清理一下canvas畫布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  //這個迴圈是迴圈便利每一句到話canvas上以及的顏色，每句話的移動速度
  //判斷每一句話走出canvas後讓它自動回來再從canvas的右邊走到左邊
  for (var j = 0; j < textArr.length; j++) {
    numArrL[j] -= (j + 1) * 0.6;
    ctx.fillStyle = colorArr[j]
    ctx.fillText(textArr[j], numArrL[j], numArrT[j]);
    if (numArrL[j] <= -500) {
      numArrL[j] = canvas.width;
    }
  }
  ctx.restore();
}, 30)
</script>
</body>
</html>

相關文章