视频知识点（1）- 图片和文字渲染坐标问题

目录

前言

图片和文字渲染坐标问题揭秘

图片水印

文字水印

二者的区别

综上所述 

---

专栏总览《音视频开发》系列-总览

前言

图片和文字是我们日常生活与工作中接触到的最普遍的视觉元素，每天任何时间任何地点几乎都能看到它们，在接触过程中你没有想过它们是如何展示的，特别是在网页中是如何渲染的？

图片和文字渲染坐标问题揭秘

当我们在画布canvas上渲染图片和文字水印时，一般会有x坐标、y坐标、大小等相关参数，它们是怎么使用的呢？我们都知道，屏幕显示渲染内容的坐标原点在左上角，那么文字和图片在屏幕渲染时的机制是否完全一样呢？如果不一样，又有什么不同呢？今天我们就带大家来一探究竟。

图片水印

如果渲染图片水印的话，一般会有x坐标、y坐标、宽、高等参数，具体含义我们都比较好理解。

canvas渲染图片相关的参数可以参考下面的表格：

参数	描述
img	规定要使用的图像、画布或视频。