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

html5 canvas海底水草动画

分类: js特效 / html5特效	发布时间: 2018-06-28	访问量: 1741
下载量: 59

点击下载预览效果

更多>

最新下载

swiper手机端触屏滑动图片切换

swiper手机端触屏滑动图片切换是一款基于swiper制作手机端图片缩放展示。

0 2026-01-31

jQuery会员中心安全修改表单代码

jQuery会员中心安全修改表单代码是一款登录密码，交易密码，手机号码，实名认证，电子邮箱，安全设置表单，会员表单等设置代码。

0 2026-01-31

js鼠标滚动图片等比例缩放代码

js鼠标滚动图片等比例缩放代码是一款js图片缩放特效代码。

0 2026-01-31

CSS3弹出Metro登录表单

CSS3弹出Metro登录表单是一款用CSS3实现的弹出登录表单，点击按钮即可弹出一个非常清新的登录表单，表单是Metro风格的，看着朴实，但是却非常简洁实用。

0 2026-01-31

jquery叠加切换幻灯片

jquery叠加切换幻灯片是一款带有金属色彩的网站首页幻灯片。

0 2026-01-31

jQuery表单输入文字计数显示代码

jQuery表单输入文字计数显示代码是一款非常实用的jQuery表单输入文字计数插件，该插件可以设置某个输入框或textarea可输入的大文字数，当用户输入文字的时候，插件会将字数倒计数显示，提示用户还可以输入多少个文字，并且显示的数字随着数字的减少会越来越清晰。

0 2026-01-31

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

16550 2025-08-28
CSS3 教程

1547512 2025-08-27
Rust 教程

23638 2025-08-27
Vue 教程

26025 2025-08-22
PostgreSQL 教程

22529 2025-08-21
Git 教程

9419 2025-08-21

html5 canvas海底水草动画

代码片段：

Stem.prototype.draw = function(ctx) {
var len, ctrlPoint, point;

len = this.points.length - 1;
ctrlPoint = {x: 0, y: 0};

ctx.save();
ctx.strokeStyle = this.color;
ctx.beginPath();
ctx.moveTo(this.points[this.points.length - 1].x, this.points[this.points.length - 1].y);
for (var i = len; i >= 1; i--) {
point = this.points[i];
ctrlPoint.x = (point.x + this.points[i - 1].x) / 2;
ctrlPoint.y = (point.y + this.points[i - 1].y) / 2;
ctx.quadraticCurveTo(point.x, point.y, ctrlPoint.x, ctrlPoint.y);
ctx.lineWidth = i * 1.1;
ctx.stroke();
ctx.fillStyle = 'red';
}
ctx.restore();
}