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

javascript实现很浪漫的气泡冒出特效代码,在博客中添加浪漫元素,这不失为一种好的方式,希望大家灵活运用,分享给大家供大家参考,具体如下

测试效果

<canvas id="canvas" width="1080" height ="2337"></canvas>

实现思路

HTML里只需要一个CANVAS元素,Javascript里操作canvas

  1. 给canvas里绘制背景图片
  2. 在绘制半径为0-10px的圆形,x坐标屏幕水平随机,y所标竖直大于屏幕高度。
      圆形背景色可以是随机,那就是各种色彩了!

  利用计时器控制y--

实现操作

  1. 自建html单页,测试用,并准备一张图片,在主体中引入
<canvas id="canvas"></canvas>
  1. 加入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="图片地址";
 var timer="";
 setInterval(function(){
 context.drawImage(myimg,0,0);
 timer++;
 if(timer%20==0){
  createCircles();
 }
 paintCircles();
 stepCircles();
 },10);
</script>

结语

感谢访问强仔博客,希望本文对你有所帮助。

  • 上一篇
  • 下一篇
  • 添加评论
    评论(8)
    四月浅森
    四月浅森

    看到这个气泡效果让我想起了一个飘雪的插件 全站有雪花落下来的效果那种

    强仔
    Q
    强仔
    旧时
    旧时

    mark

    强仔
    Q
    强仔
    旧时繁华
    强仔
    Q
    强仔
    小赵同学
    小赵同学

    博主 这个主题如果要备案的话 选择企业备案性质的域名可以使用这个主题么

    强仔
    Q
    强仔
    welcome to qiangzai blog