Canvas HTML 中“像素坐标”和“坐标”之间的区别

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%的案例，他们将提供正确的概述}