Canvas可视区与虚拟画布

Posted 2022-08-23 liangklfang

本部分主要讲解 Canvas 的基础概念，如 Canvas 的虚拟画布区域与 Canvas 的可视区域。同时给出了在 style 区域与 attribute 区域存在等比、非等比缩放场景下两者位置的转换关系，这对于理解后面章节的内容是不可缺少的。

1.Canvas 基本概念

1.1 什么是 Canvas

Canvas 是 html5 新定义的标签，通过使用脚本（一般是 javascript）来绘制图形。Canvas 标签只是图形容器，相当于一个画布，Canvas 元素本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成。

默认情况下，Canvas 元素没有边框和内容，是一个 300*150 的画布，因此，在创建了 Canvas 之后要手动对其设置宽高。目前 Canvas 有两个地方可以设置其宽高，分别是 HTML attribute 和 HTML 的 style。但是两者有本质的区别，前者对应于虚拟画布区域，即可作图的区域，而后者对应于可视区域，即 Canvas 标签占据的 DOM 区域。

1.2 Canvas 默认尺寸

<canvas id