JS手绘墨卡托投影示意图

最新推荐文章于 2022-10-06 09:50:08 发布

海天鹰

最新推荐文章于 2022-10-06 09:50:08 发布

阅读量909

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/sonichty/article/details/108814789

版权

JS 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

草图

https://blog.csdn.net/ryfdizuo/article/details/20793669

JS图

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Mercator</title>
<style>
canvas { border:1px solid gray; }
</style>
</head>
<body>
<div align="center"><canvas id="canvas" width="800" height="600"></canvas></div>
<script>
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, 800, 600);
ctx.fillStyle = "#000000";
ctx.font = "25px Arial";
ctx.fillText("墨卡托投影", 20, 50);
ctx.font = "15px Arial";
var xo = 400;
var yo = 300;
var r = 100
var ry = 40;
ctx.ellipse(xo, yo - 150, r, ry, 0, 0, Math.PI * 2);
ctx.ellipse(xo, yo + 150, r, ry, 0, 0, Math.PI);
ctx.stroke();
ctx.lineTo(xo - 100, yo - 150);
ctx.stroke();
ctx.beginPath();
ctx.ellipse(xo, yo, r, ry, 0, 0, Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.ellipse(xo, yo, r / 3, ry / 3, 0, 0, Math.PI / 4);//经度角
ctx.stroke();
ctx.fillText("λ", xo + 33, yo + 12);
ctx.beginPath();
var a = Math.PI / 4;
var x = xo + r * Math.cos(a);
var y = yo + ry * Math.sin(a);
ctx.moveTo(x, y);
ctx.lineTo(x, y - 120);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(xo + 44, yo - 66);
ctx.lineTo(xo + 52, yo - 60);
ctx.stroke();
ctx.fillText("P", xo + 30, yo - 60);
ctx.beginPath();
var x1 = xo + r * Math.cos(a) / 5;
var y1 = yo + ry * Math.sin(a) / 5;
ctx.moveTo(x1, y1);
ctx.quadraticCurveTo(x1 + 8, y1 - 8, x1 - 1, y1 - 22);//纬度角
ctx.stroke();
ctx.fillText("Φ", x1 + 5, y1 - 14);

ctx.setLineDash([4, 4]);
ctx.beginPath();
ctx.arc(xo, yo, r, 0, Math.PI * 2);
ctx.stroke();
ctx.beginPath();
ctx.ellipse(xo, yo, r, ry, 0, Math.PI, Math.PI * 2);
ctx.stroke();
ctx.moveTo(xo, yo);
ctx.lineTo(xo + r, yo);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(xo, yo);
ctx.stroke();
ctx.beginPath();
ctx.fillText("P1", x + 3, y - 120 + 10);
ctx.moveTo(x, y - 120);
ctx.lineTo(xo, yo);
ctx.stroke();
</script>
</body>
</html>

海天鹰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS手绘墨卡托投影示意图

https://blog.csdn.net/ryfdizuo/article/details/20793669草图JS图<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Mercator</title><style>canvas { border:1px solid gray; }
复制链接

扫一扫

专栏目录