当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 满屏红心效果

满屏红心效果

2018年09月29日  | 移动技术网IT编程  | 我要评论

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>红心</title>
<style type="text/css">
body{
margin: 0;
overflow: hidden;
background: #303035;
}
</style>
</head>
<body>
<canvas></canvas>
<div id="container" class="container"></div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" charset="utf-8"></script>
<script type="text/javascript">
var canvas = document.queryselector("canvas");
var ctx = canvas.getcontext("2d");

var ww = window.innerwidth;
var wh = window.innerheight;

var hearts = [];

function init(){
requestanimationframe(render);
canvas.width = ww;
canvas.height = wh;
for(var i = 0; i < 100; i++){
hearts.push(new heart());
}
}

function heart() {
this.x = math.random() * ww;
this.y = math.random() * wh;
this.opacity = (math.random() * 0.5) + 0.5;
this.vel = {
x: (math.random() - 0.5) * 4,
y: (math.random() - 0.5) * 4
};
this.targetscale = (math.random() * 0.15) + 0.02;
this.scale = this.targetscale * math.random();
}

heart.prototype.update = function(){
this.x += this.vel.x;
this.y += this.vel.y;

this.scale += (this.targetscale - this.scale) * 0.01;
if(this.x - this.width > ww || this.x + this.width < 0){
this.scale = 0;
this.x = math.random() * ww;
}
if(this.y - this.height > wh || this.y + this.height < 0){
this.scale = 0;
this.y = math.random() * wh;
}
this.width = 473.8 * this.scale;
this.height = 408.6 * this.scale;
}
heart.prototype.draw = function(){
ctx.globalalpha = this.opacity;
ctx.drawimage(heartimage, this.x - this.width * 0.5, this.y - this.height * 0.5,this.width, this.height);
}

function render(){
ctx.clearrect(0, 0, ww, wh);
// ctx.globalalpha = 1;
// ctx.fillstyle = "rgba(255,255,255,0.3)";
// ctx.fillrect(0, 0, ww, wh);
for(var i=0; i<100; i++){
hearts[i].update();
hearts[i].draw();
}
requestanimationframe(render);
}

var heartimage = new image();
heartimage.onload = init();
heartimage.src = "data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihdpzhropsi0nzmuohb4iibozwlnahq9ijqwoc42chgiihzpzxdcb3g9ijagmca0nzmuoca0mdgunii+phbhdgggzmlsbd0ii2qzmjkzmiigzd0ittqwnc42lde2ljzdmzg1ljqsni4xldm2my41ldasmzqwldbjltqxljusmc03oc41lde4ljktmtazldq4ljvdmjeyljmsmtguoswxnzuumywwldezmy44ldagyy0ymy4zldatnduumyw2ljetnjqunswxni42qzi3ljksmzkunswwldgzljqsmcwxmzmuowmwlde0ljqsmi40ldi4ljmsni42ldqxljjdmjkuniwynzguncwymzcsnda4ljysmjm3ldqwoc42ihmymdcumi0xmzaumiwymzaumi0ymzmunwm0ljmtmtiuosw2ljytmjyuocw2ljytndeumkm0nzmuocw4my40ldq0ns45ldm5ljysnda0ljysmtyunnoilz48l3n2zz4=";

window.addeventlistener("resize",function(){
ww = window.innerwidth;
wh = window.innerheight;
})

</script>
</body>
</html>

虽然我不知道实际工作中有什么用 但是万一以后表白有用呢。。。 哈哈哈

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网