js實現動態氣泡效果

原創

daww1969

2018-12-07 20:51

原文鏈接：https://www.jb51.net/article/75436.htm

本文實例講述了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實現氣泡冒出特效，謝謝大家的閱讀。

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

js實現動態氣泡效果

DOS與cmd

Tomcat部署javaweb項目遇到的奇怪問題

Android實現webSocket

Android Handler使用的安全問題

jQuery之attr與prop

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結