我们都知道在canvas 可以通过clip来实现剪裁功能，其步骤一般是先设置要裁剪的区域（路径），然后通过ctx.clip()的实现裁剪，裁剪之后，后续的绘制只能在裁剪的区域显示效果，比如如下一段代码，实现了一个圆形裁剪：

负责这块功能开发的小伙，姑且称之为L吧，最开始是通过数学计算的方式来实现这种双线，也就是在原来的路径的基础上，计算出两条路径。但是这个过程的计算算挺复杂，而是最终实现的效果很耗性能，性能损耗估计主要在于路径的计算上。

做这个需求的是一个新入职的小伙，思考摸索了很久，他也没有找到合适的方法。不得不说，部分新入职的小伙的思维能力还是有待提高啊。其实这个问题很简单，就是对元素按照坐标进行排序。从图上可以看出规则是x坐标优先于y坐标，具体来说，两个元素a和b：如果a.x > b.x 则 a > b,如果a.x < b.x 则 a < b,如果a...

恩，很简单嘛，可以回家睡觉了。等等，客户要求绘制的极限是10万个，而且每次绘制不能卡顿。先看下绘制10万个圆圈的时间是多久，用console.time 统计绘制时间：

实例化是一种只调用一次渲染函数却能绘制出很多物体的技术，它节省渲染一个物体时从CPU到GPU的通信时间。实例数组是这样的一个对象，使用它，可以把原来的的uniform变量转换成attribute变量，而且这个attribute变量对应的缓冲区可以被多个对象使用；这样在绘制的时候，可以减少webgl的调用次数。

使用此种方式绘制线框的时候，深度值偏移是必要的。那是因为，线条的光栅化过程和多边形的光栅化过程并不是完全一致的。这就导致绘制一个多边形的边和绘制多边形本身，相同位置的片元，其深度值可能并不一样。

在实际的项目中，我们经常会有如下的需求：从一个map中获取某key的值，如果发现对应的key的值为null，则为该key创建一个值(一般为初始值)，然后把这个值存回到map中，代码如下：

在WebGL1中，纹理包括2D纹理和立方体纹理，在实际的使用中，如果纹理的图片是宽和高是2的幂，可以自动生成纹理的mipmap。除此之外，还可以通过gl.texImage2D函数独立指定纹理的每个mipmap的级别。因此，这会导致一个一般的编程人员不易觉察的问题，这涉及到显卡底层驱动。简单来说，就是会导致驱动程序无法在绘图之前确...

在使用WebGL绘制图形的时候，大多数情况下，绘制一个图形的时候，其各个图元都是相连的。 但是在一些情况下，我们需要绘制图元不相连的图形，如果绘制的模式是gl.TRAINGLES或者gl.LINES，也是可以达到的，但是如果绘制的模式是gl.TRAINGLE_STRIP，gl.TRAINGLE_FAN，gl.LINE_STRIP，gl.LINE_LOOP的时候，就没法在一次绘制...

abc{1220}cde{2222}def{cccc}替换成abc{1}cde{2}def{3}也就是把{}匹配到的内容，用匹配的索引替代掉。

使用了顶点缓冲技术后，绘制效率有了较大的提升。但是还有一点不尽如人意，那就是顶点的位置坐标、法向量、纹理坐标等不同方面的数据每次使用时需要单独指定，重复了一些不必要的工作。WebGL2提供了一种专门用于解决此问题的对象——顶点数组对象（VAO）。本节将介绍顶点数组对象。

WebGL2几乎100%兼容WebGL1，需要注意的是，这里说的几乎，也就是说，也是存在一些细微的差别的，因此原本WebGL1的代码迁移到WebGL2，应该不会有遇到太多的困难；不过WebGL2和WebGL1有两个主要的差别，请看下文。

时光荏苒岁月如梭，不知不觉间，青丝变白发，哦不是，应该是WebGL已经发展到了2.0阶段:WebGL2，WebGL2相比WebGL增加了很多新的特性，这些新的特性能够帮助程序开发人员实现更多 更酷 更炫 更高性能的Web三维程序。本系列文章将会向读者展示WEBGL2开发与WebGL的区别和WEBGL2的一些重要的新特性进行介绍.

一个同时问我，JQuery事件绑定为什么不生效，最好通过查找，发现了问题。一般而言，JQuery事件绑定不生效，是一些新手经常遇到的问题，其实都是简单的问题，大概分两种情况。 先上代码,以下两个button的事件绑定都不生效。

使用node.js开发已经有一段时间了，最开始的调试是使用工具node-inspector；不过node-inspector已经很长一段时间不能用了。 现在要调试node.js程序需要使用新的方式。新的调试的方式有很多种，本文将介绍一种简单直接的方式。