<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>爱心</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #ffd1cd;
}
audio {
width: 100%;
}
</style>
</head>
<body>
<audio id="music" src="./video/沉沦与遐想（0.8x）.MP3" autoplay loop="false" autostart></audio>
<canvas id="drawHeart"></canvas>
<script>
var hearts = [];
var canvas = document.getElementById('drawHeart');
var music = document.getElementById('music')
var wW = window.innerWidth;
var wH = window.innerHeight;
// 创建画布
var ctx = canvas.getContext('2d');
// 创建图片对象
var heartImage = new Image();
// heartImage.src = 'icon/像素_爱心.svg';
heartImage.src = 'icon/像素_爱心 (1).svg';
var num = 120;
init();
window.addEventListener('resize', function () {
wW = window.innerWidth;
wH = window.innerHeight;
});
// 初始化画布大小
function init() {
canvas.width = wW;
canvas.height = wH;
for (var i = 0; i < num; i++) {
hearts.push(new Heart(i % 5));
}
requestAnimationFrame(render);
}
function Heart(type) {
this.type = type;
// 初始化生成范围
this.x = Math.random() * wW;
this.y = Math.random() * wH;
this.opacity = Math.random() * .5 + .5;
// 偏移量
this.vel = {
x: (Math.random() - .5) * 5,
y: (Math.random() - .5) * 5
}
this.initialW = wW * .5;
this.initialH = wH * .5;
// 缩放比例
this.targetScale = Math.random() * .1 + .02; // 最小0.02
this.scale = Math.random() * this.targetScale;
}
Heart.prototype.draw = function () {
ctx.save();
ctx.globalAlpha = this.opacity;
ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);
ctx.scale(this.scale + 1, this.scale + 1);
ctx.restore();
}
Heart.prototype.update = function () {
this.x += this.vel.x;
this.y += this.vel.y;
if (this.x - this.width > wW || this.x + this.width < 0) {
// 重新初始化位置
this.scale = 0;
this.x = Math.random() * wW;
this.y = Math.random() * wH;
}
if (this.y - this.height > wH || this.y + this.height < 0) {
// 重新初始化位置
this.scale = 0;
this.x = Math.random() * wW;
this.y = Math.random() * wH;
}
// 放大
this.scale += (this.targetScale - this.scale) * .05;
this.height = this.scale * this.initialH;
this.width = this.height * 1;
}
function render() {
ctx.clearRect(0, 0, wW, wH);
for (var i = 0; i < hearts.length; i++) {
hearts[i].draw();
hearts[i].update();
}
requestAnimationFrame(render);
}
// 点击播放音乐
canvas.onclick = function () {
// console.log(music);
if(music.paused){
document.body.style.backgroundColor = '#bcebbd'
// 播放音乐
music.play()
} else{
// 暂停音乐
music.pause()
document.body.style.backgroundColor = '#ffd1cd'
}
}
</script>
</body>
</html>
评论0
最新资源