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

Question

我倾向于使用 canvas 对象。我有以下坐标： A: [x1,y1] B: [x2,y2] 和一个 width 这是一个数字。我想使用这些信息在 canvas 上绘制一个矩形。我知道输出可以是 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);

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

Draw rectangle using coordinates of length edge and width on Html Canvas

html

javascript

canvas

rectangles