자바스크립트는 매우 로맨틱한 버블 터지는 효과를 구현합니다

자바스크립트는 매우 로맨틱한 버블 터지는 효과를 구현합니다_javascript 기술

ringa_lee

풀어 주다： 2018-05-14 16:12:41

원래의

1899명이 탐색했습니다.

이 기사의 예에서는 JavaScript로 낭만적인 버블 터뜨리기 특수 효과 코드를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
실행 중인 효과의 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

구현 아이디어: HTML에서는 CANVAS 요소가 하나만 필요하며, 캔버스는 Javascript로 작동됩니다.
1. 캔버스에 배경 이미지를 그립니다.
2. 반경 0-10px, x 좌표는 화면에서 수평으로 무작위이고 y 표시는 수직으로 화면 높이보다 큽니다.
원형 배경색은 랜덤, 즉 다양한 색상이 가능해요!
타이머를 사용하여 y 제어--

html 빌드

<!doctype html> <html>  
<head>  
<meta charset="UTF-8">  
<meta name="Generator" content="EditPlus®">  
<meta name="Author" content="">  
<meta name="Keywords" content="">  
<meta name="Description" content="">  
<title>5多个小球往上运动</title>  
<style>  
</style>  
</head>  
<body>   
<p id="d1">     
<canvas id="canvas"></canvas>   
</p>  
</body> </html>

로그인 후 복사

js 코드

<script>   
var canvas=document.getElementById("canvas");   
var context=canvas.getContext("2d");   
canvas.width=window.innerWidth;   
canvas.height=window.innerHeight;   
function Circle()
{     
this.x=Math.random()*canvas.width;     
this.y=canvas.height;     
this.r=Math.random()*10;     
//绘制圆形     
this.paint=function()
{       
context.beginPath();       
context.arc(this.x,this.y,this.r,0,Math.PI*2);       
context.fillStyle="white";       
context.globalAlpha = 0.5;       
context.fill();     
}     
//控制圆形移动     
this.step=function()
{       
this.y--;     
}   
}   
var circles=[];   
function createCircles()
{     
var circle=new Circle();//??????     
circles[circles.length]=circle;   
}     
function paintCircles(){     
for(var i=0;i<circles.length;i++){       
circles[i].paint();     
}   
}   
function stepCircles()
{     
for(var i=0;i<circles.length;i++){       
circles[i].step();     
}   
}   
var myimg=new Image();   
myimg.src="images/demo-1.png";   
var timer="";   
setInterval(function(){     
context.drawImage(myimg,0,0);     
timer++;     
if(timer%20==0)
{       
createCircles();     
}     
paintCircles();     
stepCircles();   
},10);
 </script>

로그인 후 복사

웹사이트에 로맨틱한 요소를 추가해야 합니다. 이는 버블 터지는 효과를 얻기 위해 자바스크립트를 유연하게 사용할 수 있는 좋은 방법입니다.