欲速则不达

摘要： 本文将介绍如何使用极坐标参数方程和上一篇文章提到的距离场SDF来绘制有趣的图案。有些曲线比起直角坐标系来说，更方便使用极坐标来表示，这个时候我们可以选择通过极坐标和直角坐标的相互转换，来实现图形的绘制 阅读全文

摘要： 本文将介绍如何使用着色器来进行几何造型，说到几何图形大家一定都不陌生，比如说三角形、圆形，在WebGL中除了直接使用顶点绘制，我们还可以使用片元着色器进行造型，以下将介绍三角形的绘制，以及应用场景。 阅读全文

摘要： 在Canvas2D中通过调用`drawImage` API就能将图像绘制到画布上，在WebGL中我们也可以绘制图像，在绘制时我们需要用到WebGL中的纹理对象，在之前实现网格背景的视频中，我使用了一个叫做纹理坐标的配置，现在要完成纹理的加载我们也需要用到纹理坐标，并且我们可以通过对纹理坐标处理实现简单的”马赛克“效果。 阅读全文

摘要： CSS中的属性Position有时能帮助我们实现一些特殊的布局需求，但是它为什么能达成特殊效果的原因很容易被人忽略，通过对文档深入学习我们可以了解他们实现的逻辑，更好的帮助我们理解布局。 阅读全文

摘要： 在之前工作的时候，偶尔会看到不同岗位同事之间互相调侃谁的地位高，后端说前端地位高，前端说后端地位高，表面上一团和气互相吹彩虹屁，实际上互相揣测谁的工资更高。开始阅读毛选后，我感觉可以用书里的方式对不同岗位的地位做一点简单的分析。不过我本人向来没什么政治敏感度，所以对办公室政治也并不太懂，因此以下也只 阅读全文

摘要： 在Canvas2D中实现圆形的绘制比较简单，只要调用`arc`指令就能在Canvas画布上绘制出一个圆形，类似的，在SVG中我们也只需要一个`circle`标签就能在页面上绘制一个圆形。那么在WebGL中我们要怎么去绘制呢？ 阅读全文

摘要： 最近我在可视化课程中学习了如何在Canvas中利用像素处理来实现滤镜效果，在这节课程的结尾留了一道局部放大镜的题目，提示我们用像素处理的方式去实现这个效果，最终实现随着鼠标移动将图片局部放大，以下是我对这个效果的简单实现。 阅读全文

摘要： 在上篇文章中，我们使用WebGL实现了网格背景，当时有提到说使用WebGL来实现的好处之一，是网格背景可以与画布上的其他元素更好地融合，比如一起缩放平移，那么在WebGL中怎么实现缩放和平移呢？现在我们已经实现了网格背景，接下来我们就用网格背景作为例子来了解一下WebGL中的缩放和平移。 阅读全文

摘要： 作为前端开发人员，我们最关注的就是应用的交互体验，而元素背景是最基础的交互体验之一。一般而言，能够使用代码实现的界面，我们都会尽可能减少图片的使用。除了使用CSS，我们还可以通过WebGL实现某些效果。 阅读全文

摘要： 提到浮动，前端的小伙伴肯定都不陌生，但是随着弹性布局等等一些更好用的标准出来后，用在布局方面少了很多，当初我刚开始接触前端的时候，很习惯用浮动来给元素改变定位，当时还并不是很流行flexbox布局，很多布局会通过浮动来实现，但是使用浮动来布局会产生一些副作用，比如虽然使用浮动可以使元素向左或向右靠齐，但会造成高度坍塌，当时的我并不太了解其中的缘由，只是机械地从网上搜索到一些解决高度坍塌的代码，到现在也不能算是了解的很透彻，只能算是比刚开始做前端的时候多了解了一点。 阅读全文