我要评论《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里（文中指出的是“花冢”）最干净，说明她对美有独特的见解。她写了《葬花吟》，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。
现代社会结婚、走红毯等很多时候会撒花瓣，满天花瓣和赏烟花一样，人们都觉得那一瞬间好美丽好浪漫。就像昙花一现，美好的事物总是很短暂，提醒人们去珍惜。这篇文章主要介绍了花瓣漫天飞舞js特效，简单浪漫，程序猿们可以跟女朋友一起欣赏
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>花瓣漫天飞舞入流水</title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<style>
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.container{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="jsi-cherry-container" class="container"></div>
<script>
var renderer = {
init_cherry_blossom_count : 30,
max_adding_interval : 10,
init : function(){
this.setparameters();
this.reconstructmethods();
this.createcherries();
this.render();
},
setparameters : function(){
this.$container = $('#jsi-cherry-container');
this.width = this.$container.width();
this.height = this.$container.height();
this.context = $('<canvas />').attr({width : this.width, height : this.height}).appendto(this.$container).get(0).getcontext('2d');
this.cherries = [];
this.maxaddinginterval = math.round(this.max_adding_interval * 1000 / this.width);
this.addinginterval = this.maxaddinginterval;
},
reconstructmethods : function(){
this.render = this.render.bind(this);
},
createcherries : function(){
for(var i = 0, length = math.round(this.init_cherry_blossom_count * this.width / 1000); i < length; i++){
this.cherries.push(new cherry_blossom(this, true));
}
},
render : function(){
requestanimationframe(this.render);
this.context.clearrect(0, 0, this.width, this.height);
this.cherries.sort(function(cherry1, cherry2){
return cherry1.z - cherry2.z;
});
for(var i = this.cherries.length - 1; i >= 0; i--){
if(!this.cherries[i].render(this.context)){
this.cherries.splice(i, 1);
}
}
if(--this.addinginterval == 0){
this.addinginterval = this.maxaddinginterval;
this.cherries.push(new cherry_blossom(this, false));
}
}
};
var cherry_blossom = function(renderer, israndom){
this.renderer = renderer;
this.init(israndom);
};
cherry_blossom.prototype = {
focus_position : 300,
far_limit : 600,
max_ripple_count : 100,
ripple_radius : 100,
surface_rate : 0.5,
sink_offset : 20,
init : function(israndom){
this.x = this.getrandomvalue(-this.renderer.width, this.renderer.width);
this.y = israndom ? this.getrandomvalue(0, this.renderer.height) : this.renderer.height * 1.5;
this.z = this.getrandomvalue(0, this.far_limit);
this.vx = this.getrandomvalue(-2, 2);
this.vy = -2;
this.theta = this.getrandomvalue(0, math.pi * 2);
this.phi = this.getrandomvalue(0, math.pi * 2);
this.psi = 0;
this.dpsi = this.getrandomvalue(math.pi / 600, math.pi / 300);
this.opacity = 0;
this.endtheta = false;
this.endphi = false;
this.ripplecount = 0;
var axis = this.getaxis(),
theta = this.theta + math.ceil(-(this.y + this.renderer.height * this.surface_rate) / this.vy) * math.pi / 500;
theta %= math.pi * 2;
this.offsety = 40 * ((theta <= math.pi / 2 || theta >= math.pi * 3 / 2) ? -1 : 1);
this.thresholdy = this.renderer.height / 2 + this.renderer.height * this.surface_rate * axis.rate;
this.entitycolor = this.renderer.context.createradialgradient(0, 40, 0, 0, 40, 80);
this.entitycolor.addcolorstop(0, 'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)');
this.entitycolor.addcolorstop(0.05, 'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)');
this.entitycolor.addcolorstop(1, 'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)');
this.shadowcolor = this.renderer.context.createradialgradient(0, 40, 0, 0, 40, 80);
this.shadowcolor.addcolorstop(0, 'hsl(330, 40%, ' + 30 * (0.3 + axis.rate) + '%)');
this.shadowcolor.addcolorstop(0.05, 'hsl(330, 40%,' + 30 * (0.3 + axis.rate) + '%)');
this.shadowcolor.addcolorstop(1, 'hsl(330, 20%, ' + 40 * (0.3 + axis.rate) + '%)');
},
getrandomvalue : function(min, max){
return min + (max - min) * math.random();
},
getaxis : function(){
var rate = this.focus_position / (this.z + this.focus_position),
x = this.renderer.width / 2 + this.x * rate,
y = this.renderer.height / 2 - this.y * rate;
return {rate : rate, x : x, y : y};
},
rendercherry : function(context, axis){
context.beginpath();
context.moveto(0, 40);
context.beziercurveto(-60, 20, -10, -60, 0, -20);
context.beziercurveto(10, -60, 60, 20, 0, 40);
context.fill();
for(var i = -4; i < 4; i++){
context.beginpath();
context.moveto(0, 40);
context.quadraticcurveto(i * 12, 10, i * 4, -24 + math.abs(i) * 2);
context.stroke();
}
},
render : function(context){
var axis = this.getaxis();
if(axis.y == this.thresholdy && this.ripplecount < this.max_ripple_count){
context.save();
context.linewidth = 2;
context.strokestyle = 'hsla(0, 0%, 100%, ' + (this.max_ripple_count - this.ripplecount) / this.max_ripple_count + ')';
context.translate(axis.x + this.offsety * axis.rate * (this.theta <= math.pi ? -1 : 1), axis.y);
context.scale(1, 0.3);
context.beginpath();
context.arc(0, 0, this.ripplecount / this.max_ripple_count * this.ripple_radius * axis.rate, 0, math.pi * 2, false);
context.stroke();
context.restore();
this.ripplecount++;
}
if(axis.y < this.thresholdy || (!this.endtheta || !this.endphi)){
if(this.y <= 0){
this.opacity = math.min(this.opacity + 0.01, 1);
}
context.save();
context.globalalpha = this.opacity;
context.fillstyle = this.shadowcolor;
context.strokestyle = 'hsl(330, 30%,' + 40 * (0.3 + axis.rate) + '%)';
context.translate(axis.x, math.max(axis.y, this.thresholdy + this.thresholdy - axis.y));
context.rotate(math.pi - this.theta);
context.scale(axis.rate * -math.sin(this.phi), axis.rate);
context.translate(0, this.offsety);
this.rendercherry(context, axis);
context.restore();
}
context.save();
context.fillstyle = this.entitycolor;
context.strokestyle = 'hsl(330, 40%,' + 70 * (0.3 + axis.rate) + '%)';
context.translate(axis.x, axis.y + math.abs(this.sink_offset * math.sin(this.psi) * axis.rate));
context.rotate(this.theta);
context.scale(axis.rate * math.sin(this.phi), axis.rate);
context.translate(0, this.offsety);
this.rendercherry(context, axis);
context.restore();
if(this.y <= -this.renderer.height / 4){
if(!this.endtheta){
for(var theta = math.pi / 2, end = math.pi * 3 / 2; theta <= end; theta += math.pi){
if(this.theta < theta && this.theta + math.pi / 200 > theta){
this.theta = theta;
this.endtheta = true;
break;
}
}
}
if(!this.endphi){
for(var phi = math.pi / 8, end = math.pi * 7 / 8; phi <= end; phi += math.pi * 3 / 4){
if(this.phi < phi && this.phi + math.pi / 200 > phi){
this.phi = math.pi / 8;
this.endphi = true;
break;
}
}
}
}
if(!this.endtheta){
if(axis.y == this.thresholdy){
this.theta += math.pi / 200 * ((this.theta < math.pi / 2 || (this.theta >= math.pi && this.theta < math.pi * 3 / 2)) ? 1 : -1);
}else{
this.theta += math.pi / 500;
}
this.theta %= math.pi * 2;
}
if(this.endphi){
if(this.ripplecount == this.max_ripple_count){
this.psi += this.dpsi;
this.psi %= math.pi * 2;
}
}else{
this.phi += math.pi / ((axis.y == this.thresholdy) ? 200 : 500);
this.phi %= math.pi;
}
if(this.y <= -this.renderer.height * this.surface_rate){
this.x += 2;
this.y = -this.renderer.height * this.surface_rate;
}else{
this.x += this.vx;
this.y += this.vy;
}
return this.z > -this.focus_position && this.z < this.far_limit && this.x < this.renderer.width * 1.5;
}
};
$(function(){
renderer.init();
});
</script>
</body>
</html>到此这篇关于花瓣漫天飞舞js特效，简单浪漫的文章就介绍到这了,更多相关花瓣js特效内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论