作者：Peter 谭老师

转发链接：
https://mp.weixin.qq.com/s/XhwPOv62gypzq5MhhP-5vg

写本文的起因

一、前言

• Vue自定义指令有全局注册和局部注册两种方式。
• 本篇局部自定义指令不做叙述

从 2017 年到 2020 年，我花了大约 4 年的时间，从零到一，实现了一个可切换 WebGL 和 Canvas2D 渲染的，跨平台支持浏览器、SSR、小程序，基于 DOM 结构和支持响应式的，高性能支持批量渲染、针对可视化场景优化、支持 WebWorker 的图形系统——SpriteJS。

在这个“造轮子”过程中，我一步步将一个很简陋的渲染库，变成一个能够支撑可视化应用和游戏开发的，还算不错的一个图形库，其中有许多积累，也有许多思考。因为毕竟是两年多前的研究，有些细节可能记得不是特别清晰，其中有些特性也许已经有点过时，但我想，还是有不少内容能给大家带来参考和启发。

一次分清clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop概念：

clientHeight：可视的，看得见的部分，content+padding；

offsetHeight：在clientHeight基础上，添加“”边框“”，即content+padding+margin；

scrollTop：超过clientHeight“顶部界线”的部分，即看不见的、已经 滚动出去 的部分；