在项目中自己使用 Canvas 实现了一下水波图，在这里给大家分享一下它的实现原理。 一开始看到波浪，可能不知道从何入手，我们来看看波浪的特征就会有灵感了。 没错，有人肯定会想到，就是 正余弦曲线！对于波陡很小的波动，一般选择正弦或余弦的曲线来表示波形，这是最简单而又最接近实际…

最近在做小程序，发现制作分享到朋友圈图片是每个项目必须的。遇到坑比较多，写起来也比较繁琐，也没有找到类似组件，所以就自己动手写了一个。 ... 想在手机上使用配置自己的 appid 即可。 普通绘制，绘制单张分享图。 把 components 中的 canvasdrawer 拷…

Shader 动画和 Canvas 动画原理是一样的，通过定时器循环渲染，并改变画布中图形的属性来实现动画。 一些 Shader 编辑器都已经实现好了定时器的功能，同时会传递一些跟时间相关的值给到着色器代码中，如 ShaderToy 中与时间相关的属性是 iTime/iTime…

最近对 html5小游戏有点兴趣，因为我感觉将来这个东西或许是前端一个重要的应用场景，例如现在每到某些节假日，像支付宝、淘宝或者其他的一些 APP可能会给你推送通知，然后点进去就是一个小游戏，基本上点进去的人，只要不是太抵触，都会玩上一玩的，如果要是恰好 get到用户的 G点，…

要问2018最让人兴奋的CSS技术是什么，CSS Houdini当之无愧，甚至可以去掉2018这个限定。其实这个技术在2016年就出来了，但是在今年3月发布的Chrome 65才正式支持。 这3个例子都是用了Houdini里面的CSS Paint API。 第1个例子如果使用传…

由此，可以看到一个由小到大扩张的圆。由于没有擦除上一帧，每一帧的绘制结果都显示出来，所以呈现出来的是一个实心的圆。我想绘制的是一个闪烁的圆，那么可以把上一帧给擦除。 首先，先画一由底部到画布中央的延伸线。既然是运动的延伸线条，那起码会有一个起点坐标和一个终点坐标 如图。大概需要…

最近公司微信公众号想使用 Apple 式的圆角阴影卡片做文章推荐。这种效果用 Adobe XD 可以轻松做出来，但是没法要求所有编辑都去学习新软件，所以就打算用前端实现一个小工具。效果如下： 更新： 已增加 Electron，可打包成 dmg 或 exe 文件运行。详见 Git…

这么简单的粒子动画？一定不能错过。