21 世纪是互联网时代，也是信息爆炸的时代，伴随着生活节奏的加快，我们需要高效地筛选出有用信息，此时，信息加载的速度就显得尤为重要。 有研究表明，一些加载缓慢的网页更容易被用户抛弃，网页打开的速度关系到网站的流量，这些可从社交网站、搜索引擎和电商的数据看出来：Facebook …

canvas实现的前端压缩裁剪工具

SVG英文全称为( Scalable Vector Graphics)，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量…

其实有很多库已经实现了流程图，比如 jointjs，gojs，jsplumb 等等。可惜都不是免费的。 如果要做的简单呢，就用贝塞尔曲线就好了，只需要提供起点终点两个点的坐标，就能用简单的算法生成一个svg 的path了。这样算法网上应该找得到。 但是如果要用正交连线来实现，这…

大家对mpvue相信都不陌生，mpvue几乎抹平了我们对浏览器端和小程序端的开发差异。不过由于小程序的特性，我们终归不能将浏览器中的一些方法和功能完全移植到小程序中。比如在canvas的一些应用上，浏览器端和小程序就存在着很大的差异性。而本文主要介绍一种更加优雅的方式来使用小程…

之前在一个移动端的抽奖页面中，在抽奖结果的展示窗口需要弹幕轮播显示，之前踩过一些小坑，现在总结一下前端弹幕效果的实现方式。 1. css3实现乞丐版的弹幕 其中如果I）中和II）中的属性发生变化会发生reflow(回流)，如果仅仅III）中的属性发生改变，只会发生repaint…

在此分享如何纯 Css 打造圆环进度条。阅读此文需具备基本数学知识：圆心角、弧度制、三角函数。 此物乃 2 + 1 夹心饼干，蓝绿色部分为果酱。显而易见饼干为两个削成了圆形的 div，我们重点演示果酱是怎么制作的： 如图所示，大扇形由 6 个小扇形构成，每一小扇形占整个圆饼的 …

最近在研究登录页面的时候，我偶然进入了一个网站。这个网站对于使用的人而言非常棒也非常有用。这个网站上的一个小细节虽然吸引了我的注意力，但是我却不那么轻松。 注意到这个，圆圈们不太自然的抖动以及不那么流畅的运动让我有了写这篇文章的想法。 这篇文章所要做的一件事就是使用基础三角函数…

最近忽然对canvas动画感兴趣，然后就心血来潮的看了一些文章，事先声明，部分原创，我只是代码的搬运工。我先上一下截图，然后再说下我的想法。 还是那句话，我只是代码的搬运工，首先是雪花飘落的场景。参考文章点击这里 —— canvas实现雪花飘落,文章上来就贴了代码，直接就能用，…