javascript實現很浪漫的氣泡冒出特效
編輯：關於JavaScript
本文實例講述了javascript實現很浪漫的氣泡冒出特效代碼。分享給大家供大家參考。具體如下：
運行效果截圖如下：
具體代碼如下：
實現思路：HTML裡只需要一個CANVAS元素，Javascript裡操作canvas
1、給canvas裡繪制背景圖片
2、在繪制半徑為0-10px的圓形，x坐標屏幕水平隨機，y所標豎直大於屏幕高度。
圓形背景色可以是隨機，那就是各種色彩了！
利用計時器控制y--
構建html
<!doctype html>
<html lang="en">
<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>
<div id="d1">
<canvas id="canvas"></canvas>
</div>
</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>
需要在自己的網站中添加浪漫元素，這不失為一種好的方式，希望大家靈活運用javascript實現氣泡冒出特效，謝謝大家的閱讀。
小編推薦
熱門推薦