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

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

运行效果截图如下：

具体代码如下：

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

1、给canvas里绘制背景图片

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

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

利用计时器控制y--

构建html

5多个小球往上运动

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()