当前位置：首页 > 资讯 > 技术文档

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

时间：2020-02-03 19:37 编辑：来源：阅读：
扫一扫，手机访问

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

本文实例讲述了javascript实现很浪漫的气泡冒出特效代码。分享给大家供大家参考。具体如下：运行效果截图如下： [img]http://files.jb51.net/file_images/article/201511/20151125142934696.jpg?20151025142944[/img] 具体代码如下： [b]实现思路：[/b]HTML里只需要一个CANVAS元素，Javascript里操作canvas 1、给canvas里绘制背景图片 2、在绘制半径为0-10px的圆形，x坐标屏幕水平随机，y所标竖直大于屏幕高度。　　圆形背景色可以是随机，那就是各种色彩了！　利用计时器控制y-- [b]构建html[/b]

<!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>

[b]js代码 [/b]

<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实现气泡冒出特效，谢谢大家的阅读。

全部评论(0)

上一篇：JS中的this变量的使用介绍
下一篇：Javascript this关键字使用分析

资讯排行榜
更多>>