H5canvas绘制404未找到页面动画代码

html5 canvas绘制404未找到页面动画模板

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>404页未找到</title>
<style>
html,body {
margin:0;
padding:0;
}
canvas {
display:block;
}
</style>
</head>
<body>
<div></div>
<script>
var canvas = document.createElement('canvas');
var height = canvas.height = window.innerHeight;
var width = canvas.width = window.innerWidth;
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
function random(min,max)
{
return Math.random()*(max-min+1)+min;
}
function range_map(value,in_min, in_max, out_min, out_max) {
return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
var word_arr = [];
var txt_min_size = 5;
var txt_max_size = 25;
var keypress = false;
var acclerate = 2;
for (var i = 0; i < 25; i++) {
word_arr.push({
x : random(0,width),
y : random(0,height),
text : '404',
size : random(txt_min_size,txt_max_size)
});
word_arr.push({
x : random(0,width),
y : random(0,height),
text : 'page',
size : random(txt_min_size,txt_max_size)
});
word_arr.push({
x : random(0,width),
y : random(0,height),
text : 'not found',
size : random(txt_min_size,txt_max_size)
});
word_arr.push({
x : random(0,width),
y : random(0,height),
text : '404',
size : Math.floor(random(txt_min_size,txt_max_size))
});
}
function render()
{
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fillRect(0,0,width,height);
ctx.fillStyle = "#fff";
for (var i = 0; i < word_arr.length; i++) {
ctx.font = word_arr[i].size+"px sans-serif";
var w = ctx.measureText(word_arr[i].text);
ctx.fillText(word_arr[i].text,word_arr[i].x,word_arr[i].y);
if(keypress)
{
word_arr[i].x += range_map(word_arr[i].size,txt_min_size,txt_max_size,2,4) * acclerate;
}
else {
word_arr[i].x += range_map(word_arr[i].size,txt_min_size,txt_max_size,2,3);
}
if(word_arr[i].x >= width)
{
word_arr[i].x = -w.width*2;
word_arr[i].y = random(0,height);
word_arr[i].size =  Math.floor(random(txt_min_size,txt_max_size));
}
}
ctx.fill();
requestAnimationFrame(render);
}
render();
window.addEventListener('keydown',function(){
keypress = true;
},true);
window.addEventListener('keyup',function(){
keypress = false;
},true);</script>
</body>
</html>

 在线演示

支付下载注意:
1.支付成功后不要关闭或刷新当前支付页面,等待系统确认后自动刷新。
2.开通会员推荐使用 Chrome 或 FireFox 浏览器,切勿使用 IE 浏览器,以免支付刷新失败。
3.如支付成功后刷新无法显示下载地址、链接失效等问题请联系客服处理。
免责声明:
1.本站资源售价仅为赞助网站,收费仅用于网站维护运营更新,感谢您的支持。
2.本站所发布资源仅限用于学习和研究测试使用,不得用于商业或非法用途。
3.如果购买下载测试后满意,请前往购买支持正版,得到更好的正版服务。
4.本站仅保证资源的正常下载和测试使用,售后不包含相关技术咨询服务,请知悉谅解。
5.本站所发布资源为非实物商品,不接受退款,请考虑好再购买。

Zadmei资源分享 » H5canvas绘制404未找到页面动画代码