当前位置：首页 > 下载站 > js特效 > html5特效 > html5 canvas海底水草动画特效

html5 canvas海底水草动画特效

分类: js特效 / html5特效	发布时间: 2018-02-27	访问量: 1953
下载量: 114

点击下载预览效果

更多>

最新下载

代码量少的jQuery图片幻灯片

代码量少的jQuery图片幻灯片是一款调用简单的jQuery jcSlider插件，只需修改插件参数及CSS便能实现想要的效果。

0 2026-01-29

jQuery超酷动态弹出表单 jQuery超酷动态弹出表单网页特效

jQuery超酷动态弹出表单是一款基于jQuery实现的超酷动态弹出登录和注册表单效果，默认情况下表单处于掩藏状态，点击登录和注册按钮表单动态显示。

0 2026-01-29

css3实现3d搜索框

css3实现3d搜索框是一款基于css3制作的3D搜索表单效果。本作品由【站长素材】收集整理，转载请注明出处！

0 2026-01-29

CSS3用户登录框样式代码

CSS3用户登录框样式代码是一款扁平修边样式的登录表单特效。

0 2026-01-29

jQuery鼠标点击切换背景图片代码

jQuery鼠标点击切换背景图片代码是一款简单实用的鼠标点击按钮切换图片背景特效。

0 2026-01-29

jQuery投资网站弹出框确认表单代码

jQuery投资网站弹出框确认表单代码是一款jQuery layer弹框插件，来自投资网站的确认投资表单代码。

0 2026-01-29

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

16389 2025-08-28
CSS3 教程

1547147 2025-08-27
Rust 教程

23488 2025-08-27
Vue 教程

25913 2025-08-22
PostgreSQL 教程

22415 2025-08-21
Git 教程

9352 2025-08-21

html5 canvas海底水草动画特效

html5 canvas海底水草动画特效是一款深海底冒泡的海藻动画场景特效

var canvas, ctx, width, height, stems, bubbles;

stems = [];
bubbles = [];

function Bubble(x, y, radius) {
this.x = x;
this.y = y;
this.radius = radius;
this.vy = -Math.random() * 5;
this.opacity = 0.2 + Math.random() * 0.5;
this.oldY = y;
}

Bubble.prototype.draw = function() {
var strokeColor, fillColor;

strokeColor = 'rgba(255, 255, 255,' + this.opacity + ')';
fillColor = 'rgba(255, 255, 255,' + (this.opacity / 2) + ')';

ctx.save();
ctx.lineWidth = 0.8;
ctx.strokeStyle = strokeColor;
ctx.fillStyle = fillColor;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
}