javascript - 获取图像 4 个 Angular 的 x、y 坐标

Question

我可以通过以下方式获取图像的坐标 x, y:

var pixelData = context.getImageData(offsetX, offsetY, 1, 1).data;

如何只计算 Angular 点的坐标？

Answer 1

您需要的是 Canvas 的宽度和高度。在下面的例子中，或者通常假设左上角的图像坐标是0,0。

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
context.fillStyle = 'blue';
context.rect(0, 0, 200, 200);
context.fill();

var width = canvas.width;
var height = canvas.height;

var topLeft =[ 0 , 0];
var topRight = [width,0];
var bottomLeft = [0,height];
var bottomRight = [width,height];

// If you are getting the pixels on the possible points then use this

var topLeft =[ 0 , 0];
var topRight = [width -1,0];
var bottomLeft = [0,height -1 ];
var bottomRight = [width -1,height-1];

<canvas id="canvas" width="400" height="400"><canvas>