Разница между «Координатами в пикселях» и «Координатами» в 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: Я действительно советую вам начинать любые исследования веб-API на этом сайте, они не всегда полностью правильны, но всегда ссылайтесь на официальные спецификации, которые вы можете прочитать, и в 99% случаев они предложат правильный обзор}