前言 通常来说，大家对svg与canvas的首要区别与印象，是svg具有与设备、分辨率无关的特性，转而普遍就认为canvas区别于svg的一大劣势就在于此。 个人愚见，更合理的描述应该是canvas对

从零开始实现一个canvas的库，画面刷新，自定义事件，组合容器，看完这个还是不会canvas就放弃它吧。

前面我们实现了一个简单的canvas库，现在我们用它来实现一个简易版流程图，在实际应用中检验它的效果。

面对网页性能要求越来越高的今天，项目性能优化已经成了项目开发中必不可少的一个环节。尤其是现在越来越火🔥的在线教育、在线编辑、直播、游戏等类型的项目中Canvas和WebGL的运用越来越多。

Canvas作为H5的的一个核心功能，在包括可视化和在线编辑等功能上发挥了很大的作用,因此这里就总结一些个人会用到的一些小技巧给大家，希望对你有所帮助！

原生 Canvas、React-konva 画网格 我们设定 canvas 初始化左上角顶点为 0,0 点，向右👉和向下👇是 X Y 轴正方向 一、原生 Canvas 画网格 1、使用 Canvas

canvas以鼠标为中心滑动滚轮缩放

在默认情况，在缩放/旋转的时候在左上角的位置，这里的左上角并不是指的是绘制路径的左上角，而是整个canvas的坐标原点。 但是大部分情况是旋转或缩放的时候都会让其在绘制路径的中心点进行。 原本可以直接粘能用的代码，但是我还是把分析过程说一下，一是为了方便网上不知道的人，也是为了…

深度解析canvas的旋转，各种复杂场景下的应用效果。我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！