一个简单抽奖特效的实现
2019-01-22 本文已影响0人
rmrfany
快过年了，有个朋友问我要一个抽奖的特效的，说是只要个很简单的滚动抽奖。我想了想，作为程序猿，我怎么能以简单为标准呢（虽然我不会GUI也不会前端），但是我有一个学习的心，哈哈。于是我就在网上搜了下，我看到一个还可以的滚动抽奖特效，是个js做的特效，于是我把源码给爬下来了（不厚道之处还请作者见谅）。
先看特效吧
image.png
我只是加了个最丑的控制按钮，和稍微改动了代码。
<script type="text/javascript">
var name_list = [
"JAING",
"ADIF",
"AKSDLJF",
"AKSDLJFSD",
];
chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // All possible Charactrers
这一部分代码可以改动为中文名字，将chars 每一个字母换成汉字列表，再将name_list中每一个改为名字就可以了，当然名字得在chars中咯。懒的话直接用英文字母也是可以的~~~
copy代码内容后文件名后缀改为html就可以了直接在浏览器中打开了
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>抽 奖</title>
<style>
canvas{
position: absolute;
text-align: center;
background: #111;
height: 100%;
width: 80%;
left: 0;
top: 0;
}
button{
position: absolute;
text-align: center;
background: #3F0;
height: 100%;
width: 20%;
right: 0;
top: 0;
border: none;
outline: none;
font-size: 30px;
}
</style>
</head>
<body>
<div>
<canvas></canvas>
</div>
<div>
<button onclick="btn_click_fun()"><h1> restart </h1></button>
</div>
</body>
<script type="text/javascript">
var name_list = [
"JAING",
"ADIF",
"AKSDLJF",
"AKSDLJFSD",
];
chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // All possible Charactrers
var index = parseInt(Math.random() * name_list.length) - 1;
text = name_list[index]; // The message displayed
scale = 50; // Font size and overall scale
breaks = 0.003; // Speed loss per frame
endSpeed = 0.05; // Speed at which the letter stops
firstLetter = 220; // Number of frames untill the first letter stopps (60 frames per second)
delay = 40; // Number of frames between letters stopping
canvas = document.querySelector('canvas');
ctx = canvas.getContext('2d');
text = text.split('');
chars = chars.split('');
charMap = [];
offset = [];
offsetV = [];
for(var i=0;i<chars.length;i++){
charMap[chars[i]] = i;
}
for(var i=0;i<text.length;i++){
var f = firstLetter+delay*i;
offsetV[i] = endSpeed+breaks*f;
offset[i] = -(1+f)*(breaks*f+2*endSpeed)/2;
}
(onresize = function(){
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
})();
requestAnimationFrame(loop = function(){
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.globalAlpha = 1;
ctx.fillStyle = '#622';
ctx.fillRect(0,(canvas.height-scale)/2,canvas.width,scale);
for(var i=0;i<text.length;i++){
ctx.fillStyle = '#ccc';
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.setTransform(1,0,0,1,Math.floor((canvas.width-scale*(text.length-1))/2),Math.floor(canvas.height/2));
var o = offset[i];
while(o<0)o++;
o %= 1;
var h = Math.ceil(canvas.height/2/scale)
for(var j=-h;j<h;j++){
var c = charMap[text[i]]+j-Math.floor(offset[i]);
while(c<0)c+=chars.length;
c %= chars.length;
var s = 1-Math.abs(j+o)/(canvas.height/2/scale+1)
ctx.globalAlpha = s
ctx.font = scale*s + 'px Helvetica'
ctx.fillText(chars[c],scale*i,(j+o)*scale);
}
offset[i] += offsetV[i];
offsetV[i] -= breaks;
if(offsetV[i]<endSpeed){
offset[i] = 0;
offsetV[i] = 0;
}
}
requestAnimationFrame(loop);
});
function btn_click_fun() {
location=location;
}
</script>
</html>
