强仔
@qiangzai

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

测试效果

实现思路

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

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

  利用计时器控制y--

实现操作

  1. 自建html单页,测试用,并准备一张图片,在主体中引入

    <canvas id="canvas"></canvas>

  2. 加入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>

结语

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

本文文章字数为:209个

您阅读这篇文章共花了:

文章最后更新于:2020 年 11 月 14 日 21:30:25

当前IP为:3.236.156.34,请自觉遵守网络安全

END
下午7:42 · 2020年11月14日
407
8
3
宝贝留个言吧

    四月浅森     
    1个月前

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

      强仔靓仔     
      1个月前
      @四月浅森

      之前用过,昨天才把那个插件全去掉了。显得的有点乱

    旧时     
    1个月前

    mark

      强仔靓仔     
      1个月前
      @旧时

      神马意思

        旧时繁华     
        1个月前
        @强仔

        表示自己已经来过.并且留下了"脚印"..

          强仔靓仔     
          1个月前
          @旧时繁华

          好家伙

    小赵同学     
    0个月前

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

      强仔靓仔     
      0个月前
      @小赵同学

      备案之前网站通常不绑定服务器的,不能访问的才可以,备过案网站内容就按你喜欢的随心所欲咯,所以备案不备案都是可以一直用的

教程
javascript实现很浪漫的气泡冒出特效
javascript实现很浪漫的气泡冒出特效代码,在博客中添加浪漫元素,这不失为一种好的方式,希望大家灵活运用,分享给大家供大家参考,具体如...
欢迎扫描二维码继续阅读
November 14, 2020
强仔博客
blogger
强仔
统计
文章:106 篇
分类:4 个
评论:324 条
加载耗时:31 ms
运行时长:1年145天
by yoniu.
强仔博客