【实测】DZ论坛或门户利用canvas实现网页背景动画美化，圈圈点点

html

<canvas id="c"></canvas>

复制代码

js

dz">

<script type="text/javascript">
$(document).ready(function() {
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();
})
}
function ready_run(){
this.to_reset();
}
ready_run.prototype = {
to_reset:function(){
var t = this;
t.x = find_random(0,w);
t.y = find_random(0,h);
t.radius = find_random(all_attribute.radius_min,all_attribute.radius_max);
t.radius_change = find_random(all_attribute.radius_add_min,all_attribute.radius_add_max);
t.opacity = find_random(all_attribute.opacity_min,all_attribute.opacity_max);
t.opacity_change = find_random(all_attribute.opacity_prev_min,all_attribute.opacity_prev_max);
t.light = find_random(all_attribute.light_min,all_attribute.light_max);
t.color = 'hsl('+style_color+',100%,'+t.light+'%)';
},
to_step:function(){
var t = this;
t.opacity -= t.opacity_change;
t.radius += t.radius_change;
if(t.opacity <= 0){
t.to_reset();
return false;
}
ctx.fillStyle = t.color;
ctx.globalAlpha = t.opacity;
ctx.beginPath();
ctx.arc(t.x,t.y,t.radius,0,2*pi,true);
ctx.closePath();
ctx.fill();
ctx.globalAlpha = 1;
}
}
function window_resize(){
w = window.innerWidth;
h = window.innerHeight;
canvas.width = w;
canvas.height = h;
}
$(window).resize(function(){
window_resize();
});
function find_random(num_one,num_two){
return Math.random()*(num_two-num_one)+num_one;
}
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {
window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||
window[vendors[xx] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
start();
});
</script>

复制代码

不需要图片，可用作背景或登录页。

【实测】DZ论坛或门户利用canvas实现网页背景动画美化，圈圈点点-Discuz教程下载

【实测】DZ论坛或门户利用canvas实现网页背景动画美化，圈圈点点

相关帖子

全部评论 0

浏览过的版块

最佳新人

管理/版主

土豪装逼

教程 / CSS+DIV素材

【原创】将文章访问量转换为K的的显示样式，如将21302转换为21.346人阅读

【原创】discuz论坛分类信息中，帖子发布页有多个图片上传功能，365人阅读

【原创】修改discuz门户文章发布时间，将默认时间yyyy-mm-dd修改367人阅读

【实测】Discuz修改论坛列表页排序，实现主题帖子按最新发表时间449人阅读

Discuz! X3.2 - X3.4 升级至 Discuz! X3.5 详细教程452人阅读

Discuz浮窗多图的DIY单页素材358人阅读

html5+css3的浮窗单图DIY模块394人阅读

html5+css3的横排导航列表DIY模块527人阅读

html5+css3的四排图文资讯列表DIY模块592人阅读

垂直时光轴HTML单页+CSS+js模块1249人阅读

所属版块