javascript实现很浪漫的气泡冒出特效

更新时间：2020年09月05日 09:33:17 作者：super_walker

这篇文章主要为大家详细介绍了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实现气泡冒出特效，谢谢大家的阅读。

您可能感兴趣的文章:

AutoJs4.4.1免费版快速接通vscode调试脚本的操作方法
这篇文章主要介绍了AutoJs4.4.1免费版快速接通vscode进行调试脚本,首先下载AutoJs并安装，下载完成后，将2个apk文件拷贝到手机安装即可，接下来需要安装插件，本文分步骤给大家介绍的非常详细，需要的朋友可以参考下
2022-10-10
JavaScript插件化开发教程（六）
本文是javascript插件化开发系列教程的第六篇文章，还是重点对上一篇文章不足的地方进行改进重构，逐步分析让大家能有一个新的认识，希望小伙伴们能够喜欢。
2015-02-02
利用Console来Debug的10个高级技巧汇总
通常，我们在编写一个新的JavaScript代码过程中经常会发生错误，可能是语法错误，可能是逻辑错误，如果没有一个调试工具帮助我们的话，相信你怕是头都要炸了。下面这篇文章主要给大家总结介绍了关于利用Console来Debug的10个高级技巧，需要的朋友可以参考下。
2018-03-03
jQuery AJAX回调函数this指向问题
了解JavaScript的人都知道JavaScript的this不总是指向当前对象，函数或类中的this指向与调用这个函数的对象以及上下文环境是息息相关的。
2010-02-02
用原生JS获取CLASS对象(很简单实用)
这篇文章主要介绍了如何用原生JS获取CLASS对象，看过dom编程艺术的朋友或许会知道的
2014-10-10
ES6 javascript中class静态方法、属性与实例属性用法示例
这篇文章主要介绍了ES6 javascript中class静态方法、属性与实例属性用法,结合实例形式分析了ES6中类的静态方法、静态属性概念、功能、使用方法与相关注意事项,需要的朋友可以参考下
2017-10-10
DOM节点深度克隆函数cloneNode()用法实例
这篇文章主要介绍了DOM节点深度克隆函数cloneNode()用法,实例分析了cloneNode()函数深度复制的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-01-01
JavaScript引用赋值与传值赋值总结
这篇文章主要介绍了JavaScript引用赋值与传值赋值总结，在JavaScript中基本数据类型都是传值赋值，复合数据类型都是引用赋值(传地址)也叫引用传址，下文更多相关资料，需要的小伙伴可以参考一下
2022-05-05
uniapp实现下拉刷新与上拉触底加载功能的示例代码
这篇文章主要记录一下uniapp实现下拉刷新与上拉触底加载功能的示例代码，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-04-04
Javascript实现通过选择周数显示开始日和结束日的实现代码
这篇文章主要介绍了Javascript实现通过选择周数显示开始日和结束日的实例代码的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-05-05