如何使用 HTML5 Canvas 制作水波纹效果

如何使用 HTML5 Canvas 制作水波纹效果,第1张

看看flash是怎么做的吧。水波波纹效果有好多种做法,实现难度不一样,效果也不一样。

比如这个

http://bbs.9ria.com/forum.php?mod=viewthread&tid=404246&highlight=%E6%B0%B4%E6%B3%A2

可以在论坛搜一搜,有讲原理的,也有直接贴源码的。用遮罩做比较简单,用柏林噪声做比较难。

首先在代码的如下位置打印事件对象,检查是不是重复调用了:

结果点击上面的“waves”和“btn”按钮分别返回了不同的事件对象,所以排除重复调用的可能。

在代码的129行,将动画定时器的时间改大(减慢动画执行速度),观察效果:

经观察,发现这个“水波纹”特效是全屏的,你看到的点击一个按钮后两个按钮上都有水波纹,其实是因为生成的那个水波纹动画层全屏覆盖住了整个页面,由于水波纹层是白色半透明的,所以页面的白色区域下你看不见,有其他颜色的区域都会看见(你可以把body的背景颜色改为除白色外的其他颜色,再点按钮试试)。

根因已经找到,解决的办法很简单,让生成的水波纹层不超出当前按钮区域即可,具体为:在代码第20行,为.waves, .btn 增加两行CSS代码:

position: relative

overflow: hidden

MD风格即Material Design,机器翻译为质感设计或者材料设计。

大概有以下特征:

1、支持5.0状态栏沉浸。

2、界面颜色不花哨,一般只有两种颜色,一种是底色,另一种是希望突出的颜色。

3、主界面有小圆,一般是某种功能的快捷启用。

4、支持侧滑菜单。

5、水波纹特效。

风格简介:

艺术概念,艺术作品在整体上呈现的有代表性的面貌。风格不同于一般的艺术特色,通过艺术品所表现出来的相对稳定、内在、反映时代、民族或艺术家的思想、审美等的内在特性。本质在于是艺术家对审美独特鲜明的表现,有着无限的丰富性。

艺术家由于不同的生活经历、艺术素养、情感倾向、审美的不同,形成受到时代、社会、民族等历史条件的影响。题材及体裁、艺术门类对作品风格也有制约作用。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7083013.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存