java代码画樱花飘落_⼀⾏代码引⼊博客园樱花飘落特效前⾔
博客园作为⾯向⼤众的博客, 个性新颖可以博得⼀赞, 简约美观也不失阅读体验, 本⽂对樱花特效js进⾏了解读, 发现作者的设计确实秒不可⾔, 即使没有注释, 思路展⽰的也很清晰. 那就废话不多说, 开始解读樱花特效js代码吧.
起步
拥有博客园账号
开通js权限
在博客侧边栏公告(⽀持HTML代码) (⽀持 JS 代码)加⼊下⾯1⾏代码便可以拥有同博主的樱花特效.
实现特效的代码js
解读
//樱花 Quaint 修改版
var stop, staticx;
var img = new Image();
img.src = "这⾥原js作者⾼明操作，请看源码，如何进制转成樱花";
// 樱花数量 (添加)
var sakuraNum = 21;
// 樱花越界限制次数, -1不做限制,⽆限循环 (添加)
var limitTimes = 2;
// 定义限制数组 (添加)
var limitArray = new Array(sakuraNum);
for(var index = 0;index < sakuraNum;index++){
limitArray[index] = limitTimes;
}
// 定义樱花, idx 是修改添加的
function Sakura(x, y, s, r, fn, idx) {
this.x = x;
this.y = y;
this.s = s;
this.r = r;
this.fn = fn;
this.idx = idx;
}
// 绘制樱花
Sakura.prototype.draw = function(cxt) {
cxt.save();
var xc = 40 * this.s / 4;
cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s) store();
}
// 修改樱花位置，模拟飘落.
Sakura.prototype.update = function() {
this.x = this.fn.x(this.x, this.y);
this.y = this.fn.y(this.y, this.y);
this.r = this.fn.r(this.r);
// 如果樱花越界, 重新调整位置
if(this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
// 如果樱花不做限制
if (limitArray[this.idx] == -1) {
this.r = getRandom('fnr');
if(Math.random() > 0.4) {
this.x = getRandom('x');
this.y = 0;
this.s = getRandom('s');
this.r = getRandom('r');
} else {
this.x = window.innerWidth;
this.y = getRandom('y');
this.s = getRandom('s');
this.r = getRandom('r');
}
}
// 否则樱花有限制
else {
if (limitArray[this.idx] > 0) {
this.r = getRandom('fnr');
if(Math.random() > 0.4) {
this.x = getRandom('x');
this.y = 0;
this.s = getRandom('s');
this.r = getRandom('r');
} else {
this.x = window.innerWidth;
this.y = getRandom('y');
this.s = getRandom('s');
this.r = getRandom('r');
}
// 该越界的樱花限制数减⼀
limitArray[this.idx]--;
}
}
}
}
SakuraList = function() {
this.list = [];
}
SakuraList.prototype.push = function(sakura) { this.list.push(sakura);
}
// list update ⽅法
SakuraList.prototype.update = function() {
for(var i = 0, len = this.list.length; i < len; i++) { this.list[i].update();
}
}
// list draw ⽅法
SakuraList.prototype.draw = function(cxt) {
for(var i = 0, len = this.list.length; i < len; i++) { this.list[i].draw(cxt);
}
}
= function(i) { return this.list[i];
}
SakuraList.prototype.size = function() { return this.list.length;
}
// 位置随机策略
function getRandom(option) {
var ret, random;
switch(option) {
case 'x':
ret = Math.random() * window.innerWidth; break;
case 'y':
ret = Math.random() * window.innerHeight; break;
case 's':
ret = Math.random();
break;
case 'r':
ret = Math.random() * 6;
break;
case 'fnx':
random = -0.5 + Math.random() * 1;
ret = function(x, y) {
return x + 0.5 * random - 1.7;
};
break;
case 'fny':
random = 1.5 + Math.random() * 0.7
ret = function(x, y) {
return y + random;
};
break;
case 'fnr':
random = Math.random() * 0.03;
ret = function(r) {
return r + random;
};
break;
}
return ret;
}
// 樱花⼊⼝
function startSakura() {
requestAnimationFrame = questAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
var canvas = ateElement('canvas'),
cxt;
staticx = true;
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;'); canvas.setAttribute('id', 'canvas_sakura');
cxt = Context('2d');
var sakuraList = new SakuraList();
// sakuraNum 樱花个数 (原版为50个)
for(var i = 0; i < sakuraNum; i++) {
var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny; randomX = getRandom('x');
randomY = getRandom('y');
randomR = getRandom('r');
randomS = getRandom('s');
randomFnx = getRandom('fnx');

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。