HTML5实现的瀑布动画，超逼真

Posted 2021-03-30 前端新世界

插件简介

html5 Canvas是一个很有意思的前端网页技术，我们在Canvas画布上可以做任何有趣的事情。今天要分享的这款瀑布动画就是利用了HTML5 Canvas的相关特性实现的。这个瀑布非常美妙，因为它模拟了整个瀑布落入湖面的美妙景象，但是从逼真度上来说，还是稍微有待改进，不过个人觉得已经非常不错了。

这个HTML5瀑布动画依赖于一个HTML5 2D渲染引擎：Pixi.js，Pixi.js的目标是提供一个快速的、轻量级而且是兼任所有设备的2D库。提供无缝 Canvas 回退，支持主流浏览器，包括桌面和移动。Pixi渲染器可以开发者享受到硬件加速，但并不需要了解WebGL。

插件预览

Play

插件下载

在线演示链接：
https://www.html5tricks.com/demo/html5-canvas-waterfall-lake/index.html

插件下载链接：
https://www.html5tricks.com/download/html5-canvas-waterfall-lake.rar

Pixi.js官方网站：
https://www.pixijs.com/

解压密码：RJ4587

你可以点击底部“阅读原文”前往我们的官方网站html5tricks，在那里你可以在线演示这款HTML5瀑布动画，并且下载这个动画。同时，如果你对HTML5感兴趣，特别是对HTML5动画感兴趣，你还可以学习这个动画的源码。

每日分享前端插件干货，欢迎关注！

点赞和在看就是最大的支持❤️