使用 scale(1,-1)，以 y 轴作为对称轴镜像反转， 就可得到著名的笛卡尔坐标系，左下角为原点

笛卡尔坐标系.png

参考 MDN Web Docs：缩放 Scaling

使用 translate(0,canvas.height); scale(1,-1); 以 y 轴作为对称轴镜像反转， 就可得到著名的 笛卡尔坐标系 ，左下角为原点

因此，修改 第一版的代码 ，更改部分如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// y轴的偏移量不同
let xoffset = xMin * scale - canvasWidth / 3 / 2;
let yoffset = yMax * scale - (canvasHeight / 3 / 2) * 5;

//以y轴作为对称轴镜像反转， 就可得到著名的笛卡尔坐标系，左下角为原点
ctx.translate(-xoffset, canvasHeight + yoffset); //  ctx.font = '14px Arial';   ctx.strokeText(`坐标原点：${xoffset / scale},${yoffset / scale}`,xoffset+14,-yoffset-14);
ctx.scale(1, -1);

//标记原点   //drawPoint(xoffset,yoffset);

//放大坐标
area = area.map(obj => {
  return [obj.x * scale, obj.y * scale];
});

//画多边形
drawArea(area);

//放大坐标  画点
points.forEach(obj => {
  drawPoint(obj.x * scale, obj.y * scale);
});
编辑文章✏