javascript實現(xiàn)很浪漫的氣泡冒出特效
更新時間：2020年09月05日 09:33:17 作者：super_walker
這篇文章主要為大家詳細介紹了javascript實現(xiàn)很浪漫的氣泡冒出特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例講述了javascript實現(xiàn)很浪漫的氣泡冒出特效代碼，分享給大家供大家參考，具體如下：
運行效果截圖如下：
具體代碼如下：
實現(xiàn)思路：HTML里只需要一個CANVAS元素，Javascript里操作canvas
1、給canvas里繪制背景圖片
2、在繪制半徑為0-10px的圓形，x坐標屏幕水平隨機，y所標豎直大于屏幕高度。
圓形背景色可以是隨機，那就是各種色彩了！
利用計時器控制y--
構(gòu)建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>
需要在自己的網(wǎng)站中添加浪漫元素，這不失為一種好的方式，希望大家靈活運用javascript實現(xiàn)氣泡冒出特效，謝謝大家的閱讀。
相關(guān)文章
用js代碼和插件實現(xiàn)wordpress雪花飄落效果的四種方法
這篇文章主要介紹了用js代碼和插件實現(xiàn)wordpress雪花飄落效果的四種方法,需要的朋友可以參考下2014-12-12
這篇文章主要為大家介紹了關(guān)于現(xiàn)代配置指南中YAML對比JSON的優(yōu)勢分析說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2022-02-02
這篇文章主要為大家詳細介紹了javaScript實現(xiàn)復選框全選反選事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要為大家詳細介紹了js如何驗證密碼強度，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
控件cloneNode（）方法的使用 實例代碼。2009-07-07
JavaScript實現(xiàn)數(shù)據(jù)可視化圖表的示例代碼
這篇文章主要介紹了如何使用JavaScript創(chuàng)建實時數(shù)據(jù)可視化圖表,我們將使用流行的圖表庫,如Chart.js,來展示如何將實時數(shù)據(jù)動態(tài)呈現(xiàn)在圖表中,感興趣的可以了解下2024-01-01
這里使用JS實現(xiàn)網(wǎng)頁上的霓虹燈文字特效代碼特效，運行效果看一下，你會看到文字的顏色像霓虹燈一樣，連續(xù)不停變化，五顏六色的，很炫的樣子，所以就叫做霓虹文字，也可以叫他文字變色效果，下面跟著小編一起學習JavaScript制作霓虹燈文字 代碼特效，需要的朋友一起學習吧2015-09-09
使用javascript實現(xiàn)監(jiān)控視頻播放并打印日志
這篇文章主要介紹了使用javascript實現(xiàn)監(jiān)控視頻播放并打印日志的方法及示例代碼分享，非常不錯,需要的朋友可以參考下2015-01-01
今天小編就為大家分享一篇Layui數(shù)據(jù)表格之單元格編輯方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家詳細介紹了js實現(xiàn)無縫滾動雙圖切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07