【H 5】canvasが噴水告白効果を描く
25560 ワード
【H 5】canvasが噴水告白効果を描く
効果図は以下の通りです.
コードは次のとおりです.
コード内に詳しい解がありますよ!
効果図は以下の通りです.
コードは次のとおりです.
コード内に詳しい解がありますよ!
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
*{margin:0;padding:0;}
body{background-color: #000;overflow: hidden;}
style>
head>
<body>
<canvas>canvas>
<script>
let anim = {
//1. （ ）
init(){
this.oC = document.querySelector('canvas');
this.ctx = this.oC.getContext('2d');
this.maxParticle = 100; //
this.particle = []; //
this.letters = " ";
this.resize() // canvas
// window resize // resize
window.addEventListener('resize', ()=>this.resize())
this.loop(); //
},
//
resize(){ // canvas
//
this.oC.width = window.innerWidth;
this.oC.height = window.innerHeight;
//
this.w = window.innerWidth;
this.h = window.innerHeight;
},
//2
loop(){
this.render(); // render
requestAnimationFrame(this.loop.bind(this))
},
//3 // 3 - 4 - 5 - 6
render() { // render
this.fade(); //
this.particle.push({ // particle
x:this.w/2, //
y:this.h,
xSpeed:(Math.random()*20)-10, // x [-10,10]
ySpeed:(Math.random()*20)-10, // y [-10,10]
// letters Math.foor
font:this.letters[Math.floor(Math.random()*this.letters.length)],
//[ 0~360, 0%~100%, 0~100%, 0~1]
color:[0,90,80,0.8]
})
this.drawParticles() //
this.clearParticle(); //
},
//5.
drawParticles(){
for(let i=0; i<this.particle.length; i++){
let particle = this.particle[i]; //
//h 0~360, s 0%~100%, l 0~100%, a 0~1
let h = particle.color[0],
s = particle.color[1] + "%",
l = particle.color[2] + "%",
a = particle.color[3];
let hsla = `hsla(${h},${s},${l},${a})`;
this.ctx.font = "20px "; //
this.ctx.fillStyle = hsla; //
// canvas ( , x，y )
this.ctx.fillText( particle.font, particle.x-10, particle.y )
//
particle.x += particle.xSpeed; // +=
particle.y += particle.ySpeed;
particle.y *=0.98; // y
particle.color[0] +=1; //
particle.color[2] *=0.99; //
if(particle.color[0] > 299){ // 299
particle.color[2] =100; //
particle.color[3] =1; // 1
}
}
},
//4. cnavas ，
fade(){
this.ctx.fillStyle = "rgba( 0,0,0,0.1 )"
this.ctx.fillRect( 0,0,this.w,this.h ) //
},
//6.
clearParticle(){
//
if( this.particle.length >this.maxParticle ){
//
this.particle.shift(); //shift
}
}
}
anim.init(); //
script>
body>
html>