浪漫泡泡html,javascript实现很浪漫的气泡冒出特效_javascript技巧

本文实例讲述了javascript实现很浪漫的气泡冒出特效代码。分享给大家供大家参考。具体如下：

运行效果截图如下：

具体代码如下：

实现思路：HTML里只需要一个CANVAS元素，Javascript里操作canvas

1、给canvas里绘制背景图片

2、在绘制半径为0-10px的圆形，x坐标屏幕水平随机，y所标竖直大于屏幕高度。

圆形背景色可以是随机，那就是各种色彩了！

利用计时器控制y--

构建html

js代码

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[i].paint();

}

}

function stepCircles()

{

for(var i=0;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);

需要在自己的网站中添加浪漫元素，这不失为一种好的方式，希望大家灵活运用javascript实现气泡冒出特效，谢谢大家的阅读。