纯爱枫若情的博客

采用 canvas.toBlob 导出图片前言一直以来，从工作以后接触都是与前端数据可视化相关的工作，所以对于 canvas 可谓是很熟悉了，这个标签要是从 w3c 的规范中抽离出去，可能我就自动失业了。闲言碎语不多说，开始回到正题。用 canvas 很多，难免要碰到将 canvas 绘制好的东西，导出成图片的需求。之前每次有将 canvas 导出图片的需求的时候，一般都是习惯性的采用 HTMLCanvasElement.toDataURL() - Web APIs | MDN 方法。最近发现，

作为一名前端数据可视化工程师来说，canvas 的使用可以说是最最基础的基本功了。canvas 虽然只是一个 html 的标签，但是可以干的事情，却远远比普通的 html 标签大得多。canvas 是一个画布，提供给我们绘图的功能，而且更神奇的是，它同时给我们提供了 2d 绘图和 3d 绘图的功能。这个 2d 和 3d 当然是广义的概念，不针对具体背后使用的技术原理。如果真的要细分的话，可...

canvas 原生 api 实现锥形渐变(conic-gradient)

前言最近碰到个用 canvas 绘制椭圆形的问题，研究了一下，发现挺有意思的。在经过一顿摸索以后，实现的效果，也还是挺不错的，在这个过程中也学到了不少东西吧。ellipse 方法兼容性问题之前没绘制过椭圆，上手，当然是想找找 canvas 原生有没有类似的 api 了。于是就上 mdn 搜索一番，这一找，还真的发现有类似的 api，不得不感概，这就太巧了，这问题不就不算问题了么。但是...

概念WebGL API 的 WebGLShader 可以是一个顶点着色器（vertex shader）或片元着色器（fragment shader）。每个 WebGLProgram 都需要这两种类型的着色器。创建流程要创建一个 WebGLShader 需要使用 WebGLRenderingContext.createShader，通过 WebGLRenderingContext.shade...

概念WebGLProgram 是 WebGL API 的一部分，它由两个 WebGLShader （webgl着色器）组成，分别为顶点着色器和片元着色器（两种着色器都是由 GLSL 语言来写的）。**WebGLProgram **需要调用GL上下文的 createProgram() 方法，然后调用 attachShader() 方法附加上着色器，之后你才能将它们连接到一个可用的程序。使用方...

之前写过一篇文章——用 scale 构建可缩放的画布，这次就来介绍下，另外一个很有意思的 canvas api，叫做 translate。按照惯例，还是先上 mdn 文档：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate，避免因为我个人的拙见，而对大家产生什么误导。首先 tra...

虽然本身是一枚前端数据可视化工程师，但是说实话，由于本身从事这一行的时间并不长，因此对于一些基础的知识，了解的其实并不透彻，也就是俗话说的，知其然不知其所以然吧。目前，对于前端的数据可视化来说，主要有三种不同的方向吧，分别是canvas 2d，canvas 3d webgl 以及 svg。这三种方式各有优劣吧，对于不同的场景，相互配合起来，才能发挥最大的作用。因此对于一个前端数据可视化工程师来...

canvas 适配浏览器可视窗口出现滚动条问题一般来说，对于前端数据可视化工程师来说，canvas 是个极好的工具。既能用 canvas 2d 调用 CanvasRenderingContext2D 的 api 来绘制各种图表、图形，这个主要依赖 cpu 来计算。也能用 canvas 3d webgl 来绘制各种图形、图表，它主要依赖 gpu 来绘制各种图形。最近突然遇到一个问题是，我有一个...