前段时间一直在做微信小程序的，遇到了许多的坑，其中遇到了需要前端合成图片保存到相册用于分享到朋友圈。借简书记录一下最终解决方案，先看一下最终效果 234ADFADB11E71B63B6C8B88DE493547.png 该文章的所有演示代码托管与github，代码地址，微信调试…

我是个很懒的人，开发过程中经常有意无意地刻意避开数学相关的知识，你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 css3 来实现，timer-function 随意选用，最多也就调一下 cubic-bezier，找到看着舒服的就行。但是怎样让动画更顺滑，写出更贴近自然的动画…

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

前段时间做某系统审核后台，出现了审核人员截图把内容外泄露的情况，虽然截图内容不是特别敏感，但是安全问题还是不能忽视。于是便在系统页面上面加上了水印，对于审核人员截图等敏感操作有一定的提示作用。 Canvas兼容性 这里我们用canvas来生成base64图片，通过CanIUse…

由于本人最近在做一些 growth hacking 的工作，业务上以后可能也会涉及去做一些能够在朋友圈火爆分享的 H5 页面，突然想到去年看到一个网易娱乐年度新闻盘点的 H5 页面非常的新颖，采用画中画的形式依次串联十多个手绘娱乐图片，加上洗脑的“好运来”音乐，让人有很大的分享…

灵感来源于前些天捡到钱了，就想着是时候给自己买辆车了，工作这么多年了应该对自己好一点，在网上搜索了一下看到这个车型。其实几年前是买过一辆的，但是不到一个月就被人偷了，伤心了好久。这次一定锁好，上三把锁保证小偷再也偷不走了，于是我拿着钱去买了些益力多，跟同事分享了，心情还是比较愉…

这种整页翻转的效果主要是做rotateY的动画，并结合一些CSS的3d属性实现。 主要是通过计算页面翻折过来的位置。 这两种原理上都不是很复杂，需要各个细节配合好，形成一个连贯的翻书动画。 我们先重点说一下第一种翻页效果的实现。 1. 基本布局 一个li.paper就表示一张纸…

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

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