-
运行效果的截图如下：
具体代码如下：
实现：在HTML中，只需要一个画布元素，而画布是用Javaｓｃｒｉｐｔ操作的。
1，在画布上画背景图片。
2。在一个圆的绘制一个半径0-10px，x坐标的屏幕是随机的，和Y垂直大于屏幕高度。
圆形背景色可以是随机的，那就是各种颜色！
用定时器控制y——
创建HTML
5多个小球向上运动
JS代码
VaR的画布document.getelementbyid（画布）；
VaR上下文= canvas.getcontext（2D）；
宽度= window.innerwidth画布；
高度= window.innerheight画布；
函数圆（）{
这个X = Math.random（）* canvas.width；
这canvas.height Y =；
这个R = Math.random（）* 10；
绘制一个圆
这个函数=函数（）{
Context.beginPath（）；
Context.arc（这个X，Y，这，这，R，0，数学。π×2）；
背景。fillStyle =白色；
context.globalalpha = 0.5；
Context.fill（）；
}
循环移动控制
这个步骤=函数（）{
this.y--；
}
}
var圆= }；
功能createcircles（）{
var循环=新（圆）；
圆圈{圆圈，长度} =圆圈；
}
功能paintcircles（）{
对于（var i = 0；i < circles.length；i++）{
圆圈{ } }；
}
}
功能stepcircles（）{
对于（var i = 0；i < circles.length；i++）{
圆圈{步}（）；
}
}
My IMG =新的图像（VAR）；
Myimg。src=图像/ demo-1。png；
var定时器；
setInterval（）{（）函数（
context.drawimage（My IMG，0,0）；
定时器+；
如果（计时器% = 20 = 0）{
CreateCircles（）；
}
paintcircles（）；
StepCircles（）；
}，10）；
你需要在你的网站上添加浪漫元素。这是个好办法。我希望你能用Javaｓｃｒｉｐｔ使泡泡产生特殊效果。谢谢你的阅读。