本文是基于canvas去实现图片裁剪工具。因为canvas代码还是比较长的，尽量写思路，完整代码已放在github上。 这个是写canvas必定接触的问题，网上关于这个的答案也到处都是，就不详细介绍了。 因为canvas不是矢量图，在Retina屏下，浏览器用多个像素点去渲染一…

周末好，今天给大家带来一款接地气的环形进度条组件vue-awesome-progress。近日被设计小姐姐要求实现这么一个环形进度条效果，大体由四部分组成，分别是底色圆环，进度弧，环内文字，进度圆点。设计稿截图如下： 我的第一反应还是找现成的组件，市面上很多组件都实现了前3点，…

今天，我们给大家介绍图分析与图可视化，机遇与挑战篇。在前端领域，可视化是一个鲜有人问津的一个领域，加上Graph图的概念，可能了解的人就更少了。今天我们将以一条 Gartner 技术曲线入手，站在行业的高度，介绍Graph Analysis 这个新兴技术，然后我们具体到图的概念…

从古至今，能源都是人类生存的基础。古时候，人们利用如动物粪便、草木柴薪等生物能源为之提供光和热。现代社会，能源的来源更丰富了：石油、核能、风力……人类更加离不开能源，它也是社会发展和经济发展的推动力。能源的来源和节约是人们关注的问题。那么，当今人类又是如何掌控和利用能源的呢，又…

本文有两个关键词：音频可视化和Web Audio。前者是实践，后者是其背后的技术支持。 Web Audio 是很大的知识点，本文会将重点放在如何获取音频数据这块，对于其 API 的更多内容，可以查看 MDN。 另外，要将音频数据转换成可视化图形，除了了解 Web Audio 之…

中文字“图”在大家的传统认知里指的是图画、图像，而图论与可视化中的“图”—— Graph 则有着更精确的定位：主体（objects）与关系（relationships）的组成。它甚至不局限于视觉，主体与关系的数据也可以称为图。而呈现到视觉上，即图可视化，一般有以下几种表达方式：…

设计师经常会在他们的设计中添加一些随意元素，这是一种很棒的设计技巧。但是对于前端实现来说，这类设计元素的还原大多数情况会让我们感到无能为力，因为基础 Api 提供的都是规律的几何形状（圆，矩形等...），常常最后，这些效果都只好妥协使用切图还原，我们不能做更多优化，更不能通过增…