javascript - Canvas HTML 中 “Coordinates in pixels” 和 “Coordinates” 之间的区别

Question

我正在使用 JavaScript 进行视频处理，我做得很好，但我使用的是一种名为 canvasCtx.rect () 的方法，它接收这些参数。

然后我可以从使用 getImageData () 方法绘制的矩形中获取数据，但它接收以下参数:

它们看起来很相似，几乎相同，但是在“X”和“Y”坐标中，.rect() 接收坐标，.getImageData() 也接收“X”和“Y”坐标，但是现在以像素为单位，我不知道这是否是我的看法，但我正在图表上绘制数据，我觉得它们有点过时，我想知道实际上它们是否必须是不同的值，或者它是真的一样。谢谢。

Answer 1

从技术上讲，只有 getImageData 和 putImageData 的参数以像素为单位，所有其他方法的参数都相对于应用于上下文的当前变换矩阵。

例如，如果将上下文缩放 2 倍，则在 10, 10 处绘制实际上将在 20px, 20px 处绘制。

const ctx = document.getElementById('canvas').getContext('2d');

// draw first with init matrix (coords 1,1 => 1px,1px)
ctx.beginPath();
ctx.rect(10, 10, 50, 50);
ctx.fillStyle = 'green';
ctx.fill();
// now draw scaled by 2 (coords 1,1 => 2px,2px)
ctx.scale(2, 2);
ctx.beginPath();
ctx.rect(10, 10, 50, 50);
ctx.fillStyle = 'red';
ctx.fill();

<canvas id="canvas"></canvas>

所以更正确的说法是rect()的参数以像素乘以当前矩阵为单位，对于介绍来说这是相当复杂的，所以无论您正在阅读的任何文档，最好省略任何单位，因为实际上没有单位，就像 MDN web docs 一样。 ¹ 确实如此。

现在 getImageData 和 putImageData 不受变换矩阵的影响，因此这些方法的参数可以说是以像素为单位的，因为它们总是映射到一个:

const ctx = document.getElementById('canvas').getContext('2d');

// draw first with init matrix, coords 1,1 => 1px,1px
ctx.beginPath();
ctx.rect(10, 10, 50, 50);
ctx.fillStyle = 'green';
ctx.fill();
// scale by two
ctx.scale(2, 2);
const img = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(img, 70, 10);

<canvas id="canvas"></canvas>

^{1:我真的建议您从现在开始在这个网站上开始对 Web API 进行任何研究，它们并不总是完全正确，但始终链接到您可以阅读的官方规范，并且 99%对于案例，他们会提供正确的概述}