在 canvas 中进行排版布局的一些实践，在 web 以及各类小程序（如微信小程序）上该方案均适用。

Canvas在刚推出时主打的优势就是更快的渲染速度，刷新了人们对Web页面元素绘制速度的印象，但Canvas的优势却不仅限于此。

网上那些炫酷的热力图是如何绘制的? 相信你也很好奇，本文将以 canvas 作为绘图示例来讲解热力图的原理。 我们经常遇到透明度的概念，如 CSS 中的 opacity 属性、rgba 颜色中的 alpha 变量、canvas 中的 globalAlpha 属性等。 它们的取值…

数据可视化的目的其实就是直观地展现数据，例如让花费数小时甚至更久才能归纳的数据量，转化成一眼就能读懂的指标；通过加减乘除、各类公式权衡计算得到的两组数据差异，在图中颜色敏感、长短大小即能形成对比；数据可视化是一个沟通复杂信息的强大武器。通过可视化信息，我们的大脑能够更好地抓取和…

相信大家平时在学习canvas 或 项目开发中使用canvas的时候应该都遇到过这样的需求：实现一个可以书写的画板小工具。 通过以上几个步骤我们就可以实现基本的画板功能了，然而事情并没那么简单，仔细的童鞋也许会发现一个很严重的问题——通过这种方式画出来的线条存在锯齿，不够平滑，…

烟花炸裂后微粒：自身位置（x, y），自身大小（size），自身速度（rate），最大烟花半径（radius）。 config：为全局变量，以及控制参数，包括画布宽高，设定烟花属性等。 此时烟花是这样的，感觉少了点小尾巴。 现在我们每一帧都是清除了画布，如果要加上小尾巴其实也很…

我们的业务涉及电商、教育行业，出于营销以及功能需要，会有很多卡片展示（长按保存）的需求，或者分享长图的需求。以及我们有面向商家的PC端，商家端又能编辑、实时预览卡片的样式。 同样的卡片内容我们需要在两端以两种框架（vue react）分别维护。 考虑到依赖太大（ungzippe…

1. 粒子系统的共性 1. 创建 canvas 画布。 2. 初始化粒子（创建粒子形状，确定粒子的起始位置）。 3. 绘制粒子到画布。 4. 定义粒子的运动方式（即粒子的运动动画）。 5. 控制动画的播放与暂停。 6. 清除画布。 1. 创建 canvas 画布。 （基类完成）…