使用 Html Canvas 上的长边和宽度坐标绘制矩形

Question

我倾向于使用canvas 对象。我有以下坐标： A: [x1,y1] B: [x2,y2] 和一个width，它是一个数字。我想使用这些信息在画布上绘制一个矩形。我知道输出可以是 AB 两边的两个矩形。 一种方法是找到两条垂直于AB 的线，然后使用width 值从每个点找到另一个BC 和AD 点。 有没有更好的解决方案？ 谢谢

Answer 1

如果您知道矩形两端的顶点，则不需要宽度。宽度和高度可以通过减去正方形的顶点来获得。请参考以下代码。

const CANVAS_WIDTH = 400;
const CANVAS_HEIGHT = 300;
const canvas = Object.assign(document.createElement('canvas'), {width: CANVAS_WIDTH, height: CANVAS_HEIGHT});
const ctx = canvas.getContext('2d');

const A = [10, 30];
const B = [120, 250];

const drawRectByCorner = (ctx, corner1, corner2) => {
  const [x1, y1] = corner1;
  const [x2, y2] = corner2;
  ctx.fillRect(x1, y1, x2 - x1, y2 - y1); // x, y, width, height
};

drawRectByCorner(ctx, A, B);