性能优化一直是Web端的”热度之王“，不论是日常工作还是面试，都是重中之重；小生不才，将我工作所做、书中所得呈现在各位看官面前，供各位看官品味个中滋味。

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

前言 大家好！ 我是热爱图形的fly, 之前在群里和粉丝讨论canvas 如何实现事件系统， 然后呢？ 我自己其实也对这个比较感兴趣， 我看过很多canvas 实现的项目， 比如canvas 实现思维

前言 本周在工作中遇到了这样一个需求：点击canvas画出来的矩形，要弹出一个框来显示这个矩形相关的信息。 说真的，我一开始觉得这个还挺好做的呀，不就是绑定一个click事件，然后弹出来一个框么？当我

首先canvas绘图是要有一个 <canvas></canvas> 标签的，然后使用脚本取绘制。<canvas></canvas> 就是一个dom节点，所以我们可以在这个节点上监听一些事件，比如click。但是这样存在问题，点击画布中的任意一个地方，都会触发click事件，现在…