对于svg，可能一些刚接触前端的同学比较的陌生。你可以先去MDN上看一下基本的介绍。本篇内容最重要的一个知识点就是stroke-dasharray和stroke-offset的组合使用。 这个难度不是很大，本质上就是一个小圆弧在圆环上旋转。 接下来重点来了，我们需要通过tran…

就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascrip…

最近在做一个音乐webapp的时候，遇到这样一个需求：提取歌曲图片的主题色，然后应用到全局。 一开始的思路是把图片绘入到canvas中利用getImageData()获取图片的像素数据，分析这些数据得出最接近图片的颜色。接着问题来了，如果在canvas绘入跨域资源，canvas…

前几天，用es6的语法重写了我的一个代码库，说是重写，其实改动的并不多，工作量不大。在重写完了的时候，就个人总结了一下es6常用的一些常用的语法和比es5优越的方面。下面提到的语法可能也就是es6新特性的10%-20%，但是开发上占了80%左右的。下面的文章，按照es6常用新特…

JavaScript 专题系列是我写的第二个系列，第一个系列是 JavaScript 深入系列。 JavaScript 专题系列共计 20 篇，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里、递归、乱序、排序等，特点是研(chao)究…

前端优化有很多，图像优化也是其中的一部分。无论是渐进增强还是优雅降级，图像优化成为了开发上不可忽视的一部分。 图像优化的前提是需要了解图像的基本原理。常规的图像格式分为矢量图和位图。 原理： 矢量图形使用线、点和多边形来表示图像。 光栅图形，也可以成为位图，通过对矩形格栅内的每…

今天我们要讲解下如何编写一个图片压缩、方向纠正插件，附带着会讲解下如何上传和预览。 相信大家在做项目过程中，经常会遇到上传图片到后端，但是由于图片过大，需要对图片压缩处理。特别在移动端，手机拍的照片普遍过于大了，我们有时候只是需要上传一张头像，很小就够用了。还有在部分手机上（已…

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