canvas模拟弹幕效果代码实例

2018-1-23 14:35| 作者: admin| 查看: 1328| 评论: 0|来自: 蚂蚁部落

关于弹幕效果大家一定不会陌生,现在各大视频网站基本都实现了这样的功能。

有效增强了互动效果,下面就分享一段代码实例,它使用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>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部