黄庆的博客 | HUANG QING BLOG

Lighthouse

Chrome DevTool Audits.

Lighthouse Audits 面板基于谷歌开发的 Lighthouse，它提供了一整套全面的测试来评估网页的质量。测试类别分别是性能、辅助功能、最佳实践和 PWA（Progressive Web Apps）。 Lighthouse 的口号是“Do Better Web”，旨在帮助 Web 开发者改进他们现有的 Web 应用程序。通过运行一整套的测试，开发者可以发现新的 Web 平台 ...

Posted by huangqing on March 28, 2019

2018年 JavaScript 明星项目

JavaScript 明星项目 risingstars.js.org 最受欢迎项目 Vue.js 连续第三次登顶年度排行榜冠军。它今年在 GitHub 上新增了超过 45k 的 star，比 2017 还要多 5k… 势头依然不减！第 4 名，Deno 是今年前十名中唯一的新项目。 Deno 是“一个可在浏览器外执行 JavaScript 和 TypeScript 代码的程序”。...

Posted by huangqing on March 14, 2019

IoC

Ioc 什么是 IoC IoC 的全称叫做 Inversion of Control，可翻译为为「控制反转」或「依赖倒置」，它主要包含了三个准则：高层次的模块不应该依赖于低层次的模块，它们都应该依赖于抽象抽象不应该依赖于具体实现，具体实现应该依赖于抽象面向接口编程而不要面向实现编程 Ioc 演进演进 1-简单的 App 假设需要构建一款应用叫 App，它...

Posted by huangqing on March 1, 2019

SVG-Filter

Inset Drop-shadow

Filter SVG教程 SVG过滤器的输入和输出 SVG过滤器在应用过滤效果的时候需要一个输入源。这个输入源可以是一个图形，或图形的alpha通道，或另一个过滤器的输出值。 SVG过滤器可以从输入源中产生一个输出图像。一个过滤器的输出可以是另一个过滤器的输入，这样，过滤器可以被链接起来使用。下面是一张SVG过滤器输入和输出的说明图片： SVG过滤器的输入通常在SVG滤镜的...

Posted by huangqing on January 29, 2019

javascript函数式编程

引言函数式编程的历史已经很悠久了，但是最近几年却频繁的出现在大众的视野，很多不支持函数式编程的语言也在积极加入闭包，匿名函数等非常典型的函数式编程特性。大量的前端框架也标榜自己使用了函数式编程的特性，好像一旦跟函数式编程沾边，就很高大上一样，而且还有一些专门针对函数式编程的框架和库，比如：RxJS、cycleJS、ramdaJS、lodashJS、underscoreJS等。函数式编程变...

Posted by huangqing on December 26, 2018

SVG-Snap

snap.svg

官网 snap.svg / snap.svg doc 创建元素 Snap(...) Snap(width,height) Snap(SVGElement) Snap(array of elements) Snap(CSS query selector) Paper.el(name, attr) Creates an element on paper with a given ...

Posted by huangqing on November 30, 2018

SVG-Path Ellipse

绘制椭圆弧

SVG Ellipse 圆弧(A)指令 SVG中的路径数据，即path元素的 d 属性，有一系列的路径绘制指令，其中椭圆弧指令(A)最复杂，不算椭圆弧起始点的x,y坐标的话，依然有 7 个参数。 SVG椭圆弧指令的参数，与Canvas等圆弧指令的参数有很大差别，Canvas中使用圆心、半径、起始角度、结束角度等为参数，而SVG使用起始点坐标、半径、方向、结束点坐标等为参数。 SVG之所...

Posted by huangqing on November 29, 2018

Quadratic Bezier

贝塞尔曲线

二次贝塞尔曲线 CSS3贝塞尔曲线二次、三次贝塞尔曲线呈现工具描述一个标准的3次贝塞尔曲线需要4个点：起始点、终止点（也称锚点）以及两个相互分离的中间点。贝塞尔曲线需要的4个点。无论SVG, Canvas还是CSS3动画与贝塞尔搞基，都牵扯到这4个点。指令Q Q(q) cx cy x y 从当前点画一条到(x, y)的二次贝塞尔曲线, 曲线的控制点为(cx,...

Posted by huangqing on November 29, 2018

CSS3-Matrix 2D

矩阵 2D转换

CSS Matrix 2D 2D Transform Methods Function Description matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values ...

Posted by huangqing on November 28, 2018

SVG-Text

绘制SVG文字

SVG Text 文字的定义在深入了解SVG文字之前，先来看看下面的三个定义： Glyphs：Glyphs是字母或符号的视觉表现。例如，因为字母“a”有多种不同的视觉表现方式，所以可以使用不同的Glyphs来绘制它。 Fonts：Fonts代表字体，它是glyphs的集合，可以用于表现一组字母或符号。 Characters：Characters是代表一个字母或符号的二进...

Posted by huangqing on November 18, 2018

HUANG QING BLOG