자바스크립트는 매우 로맨틱한 버블 터지는 효과를 구현합니다_javascript 기술
- ringa_lee원래의
- 2018-05-14 16:12:411854검색
이 기사의 예에서는 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>웹사이트에 로맨틱한 요소를 추가해야 합니다. 이는 버블 터지는 효과를 얻기 위해 자바스크립트를 유연하게 사용할 수 있는 좋은 방법입니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.