目录
前言
图片和文字渲染坐标问题揭秘
图片水印
文字水印
二者的区别
综上所述
前言
图片和文字是我们日常生活与工作中接触到的最普遍的视觉元素，每天任何时间任何地点几乎都能看到它们，在接触过程中你没有想过它们是如何展示的，特别是在网页中是如何渲染的？
图片和文字渲染坐标问题揭秘
当我们在画布canvas上渲染图片和文字水印时，一般会有x坐标、y坐标、大小等相关参数，它们是怎么使用的呢？我们都知道，屏幕显示渲染内容的坐标原点在左上角，那么文字和图片在屏幕渲染时的机制是否完全一样呢？如果不一样，又有什么不同呢？今天我们就带大家来一探究竟。
图片水印
如果渲染图片水印的话，一般会有x坐标、y坐标、宽、高等参数，具体含义我们都比较好理解。
canvas渲染图片相关的参数可以参考下面的表格：
| 参数 | 描述 |
|---|---|
| img | 规定要使用的图像、画布或视频。 |
| sx | 可选。开始剪切的 x 坐标位置。 |
| sy | 可选。开始剪切的 y 坐标位置。 |
| swidth | 可选。被剪切图像的宽度。 |
| sheight | 可选。被剪切图像的高度。 |
| x | 在画布上放置图像的 x 坐标位置。 |
| y | 在画布上放置图像的 y 坐标位置。 |
| width | 可选。要使用的图像的宽度。（伸展或缩小图像） |
| height | 可选。要使用的图像的高度。（伸展或缩小图像） |
先来看一张图片水印的效果图，我们在左上角（10，10）的位置放了一个宽和高都是50像素的logo图片，如下图所示：
PS：左上角的logo是我CSDN账号的头像，是不是很可爱？太自恋了。。。
文字水印
如果渲染文字水印的话，一般会有x坐标、y坐标、fontSize（字体大小）等参数，这些参数也很好理解。
canvas渲染文字相关的参数可以参考下面的表格：
| 值 | 描述 |
|---|---|
| font-style | 规定字体样式。可能的值：
|
| font-variant | 规定字体变体。可能的值：
|
| font-weight | 规定字体的粗细。可能的值：
|
| font-size / line-height | 规定字号和行高，以像素计。 |
| font-family | 规定字体系列。 |
| caption | 使用标题控件的字体（比如按钮、下拉列表等）。 |
| icon | 使用用于标记图标的字体。 |
| menu | 使用用于菜单中的字体（下拉列表和菜单列表）。 |
| message-box | 使用用于对话框中的字体。 |
| small-caption | 使用用于标记小型控件的字体。 |
| status-bar | 使用用于窗口状态栏中的字体。 |
再来看一张文字水印的效果图，我们在左上角（10，10）的位置放了一个大小10像素的单词（hello），如下图所示：
注意：这里添加的文字和图片都是硬水印，不是传统的软水印，有很高的安全性。
二者的区别
那么图片和文字二者的渲染机制有什么不同呢？因为控制参数基本一样，几乎看不出有什么区别。接下来看一个实验，我们在同一个位置，同时渲染文字和图片水印，如下图所示：
怎么样？有没有发现问题？是的，图片和文字居然没有相互叠加！！！，我们可是选择的相同位置呀！是的，这就引出了二者渲染机制上一个非常大的区别。
比如我们选择了（10，10）坐标点，开始渲染图片和文字。其中，文字在该坐标点的上侧，图片在该坐标点的下面，如下图所示：
其实，二者的不同主要体现在渲染方向上，文字的渲染方向是从左下角向右上角，图片的渲染方向是从左上角向右下角。
形象一点的话，可以看下图：
好了，我们再进一步验证上面的结论，我们保持文字和图片水印的位置不变，把文字大小从10px增大到50px，图片宽高从50px增大到100px。按照上面的结论，我们可以猜测图片水印大小扩大一倍且展示完全；文字水印也变大了，但是因为渲染方向的缘故，我们只能看到hello单词的下半部分，因为上半部分被隐藏了。那事实是不是这样呢？我们看一下效果吧：
漂亮！我们的结论是正确的。
综上所述
图片和文字水印在渲染方向上有本质的不同，前者向右下角生长，后者向右上角生长。
PS：说到这里，让我想到了堆和栈，一个向高地址增长，一个向低地址增长。
本文分享自微信公众号 - 玩转音视频（gh_5da216074f34）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。