图解 Canvas 元素容器缩放几何意义
Posted liangklfang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图解 Canvas 元素容器缩放几何意义相关的知识，希望对你有一定的参考价值。
本部分主要讲解 CSS 的 background-size 相关内容。你可能会想，明明是 Canvas 系列为啥要讲 CSS 背景缩放？这是因为在具体的 Canvas 元素绘制场景，往往会牵涉到元素的缩放，而为了使得缩放后的元素能满足业务需求，就需要选择不同的缩放方法。
1.关键制图元素标记策略
在业务制图场景，经常会沉淀相应的制图模板，比如一个节目海报要同时投放在 A、B、C、D 等多个渠道，但是各渠道又有细微的差别，比如渠道 LOGO等。此时设计侧就会出一个制图的模板，该模板指定了图片包含的基本元素、元素属性（如尺寸、位置）等等，然后由业务侧根据制图模板进行成品图的制作。一方面可以减少设计侧反复出图的人力成本，直接从输出成本图转化为输出模板即可，另一方面通过图片共性的挖掘，通过相应的技术手段加快业务素材输出的效率。
比如，上面的制图模板指定了其包含 4 个人物元素（人脸宽度、高度、位置等）、一个主标题、副标题、一个优酷独播的 LOGO。该模板一般会通过 sketch、photoshop 进行设计，然后由技术侧对设计源文件进行解析，确定各个元素的位置、尺寸等信息。具体解析的数据可能是如下格式：
const templateInfo = 以上是关于图解 Canvas 元素容器缩放几何意义的主要内容，如果未能解决你的问题，请参考以下文章