这是一款canvas 背景动画,每次进入都有不同的背景动画。透明度递减值、颜色亮度递减、泡泡的大小递减。
首先引用文件
<script src="jquery.min.js"></script>
// 个数 // 如果数量小于num,有这些几率添加一个新的 // 初始半径最小值// 初始半径最大值// 初始透明度最小值// 透明度递减值最小值// 颜色亮度最小值,等等设置。
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var c = $("#c");
var w,h;
var pi = Math.PI;
var all_attribute = {
num:100, // 个数
start_probability:0.1, // 如果数量小于num,有这些几率添加一个新的
radius_min:1, // 初始半径最小值
radius_max:2, // 初始半径最大值
radius_add_min:.3, // 半径增加最小值
radius_add_max:.5, // 半径增加最大值
opacity_min:0.3, // 初始透明度最小值
opacity_max:0.5, // 初始透明度最大值
opacity_prev_min:.003, // 透明度递减值最小值
opacity_prev_max:.005, // 透明度递减值最大值
light_min:40, // 颜色亮度最小值
light_max:70, // 颜色亮度最大值
};
var style_color = find_random(0,360);
var all_element =[];
window_resize();
function start(){
window.requestAnimationFrame(start);
style_color+=.1;
ctx.fillStyle = 'hsl('+style_color+',100%,97%)';
ctx.fillRect(0, 0, w, h);
if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability){
all_element.push(new ready_run);
}
all_element.map(function(line) {
line.to_step();
})
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791