HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。 这里看到压缩效果已经由原来的8.5Mb到…

拥有了强大的Canvas，我们可以使用JavaScript来控制它从而轻易地绘制出各种各样想要的图形，还可以利用JavaScript将用户的交互与canvas的绘制紧密地连接起来，甚至大可发挥我们的脑洞去做各种各样天马星空的事情。 如上所述，动画就是一张张静态的图片以一定的速度…

日常搬砖中有需要维护前端解析 PSD 文件的场景，PSD 文件解析导出后会有大量高度相似的重复图片，在后续的流程需要将这些图片上传，如果能剔除掉重复的图片则可以大大减小服务端资源的浪费。本着凡事客户端先试试的原则，我们试着实现一个朴素的相似图片识别。 如果两张图片的尺寸不一致，…

fabricjs 在国内并不算特别出名，但是在国外应该是特别的火了。它是一个强大的js库，使用它能够很方便的操作canvas。平时使用canvas的时候，总要学习它的各个api，画简单图形还算熟练，一旦稍微复杂一点就需要不断的查文档，非常不方便。fabric.js提供在上面建立…

如果我们用Canvas实现了一些动画效果，需要将它回放出来，很多人通常就是用录屏工具将屏幕内容录下来播放，很少有人知道，Canvas可以直接通过现代浏览器支持的 Media Streams API 来转成视频。 Canvas对象支持captureStream方法，这个方法会返回…

要达到如同上图所示的效果，首先需要解决的问题便是节点选取，我们要如何判断当前鼠标点种了节点，此次采用的办法为读取鼠标相对于当前位置相对于canvas的位置，再扫描绘制的点的位置，判断当前位置是否在某个点的附近。 因为添加hover效果只执行一次切不想被外部访问，所以定义成一个内…

Canvas是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。J…

@蛋蛋：首先来看下我们准备要做的 ISUX 粒子动画效果是怎么样的~

Canvas是一个可以使用脚本（通常为Javascript，其它比如 Java Applets or JavaFX/JavaFX Script）来绘制图形，默认大小为300像素×150像素的HTML元素。 经过了以上地狱般的学习，我相信同学们现在已精通canvas。 接下来，我…