根据地图经纬度绘制 canvas 电子围栏【2】 前端
使用scale(1,-1)，以y轴作为对称轴镜像反转， 就可得到著名的笛卡尔坐标系，左下角为原点
参考 [MDN Web Docs：缩放 Scaling ](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Transformations)
使用 `translate(0,canvas.height); scale(1,-1); ` 以y轴作为对称轴镜像反转， 就可得到著名的 **笛卡尔坐标系** ，左下角为原点
因此，修改 [第一版的代码](https://www.nanshanqiao.com/zz_article/105.html) ，更改部分如下
```javascript
// 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);
});
```
笛卡尔坐标系scale地图经纬度canvas电子围栏坐标放大
下一篇：js HtmlSpecialChars 函数把预定义的字符转换为 HTML 实体
本文链接： http://www.nanshanqiao.com/zz_article/106.html暂无评论
评论
