我试图用维基百科上的一些关于地图正交投影的数据制作一个球体，有一些事情让我忙了一段时间。当我运行这个项目时，在球体的中心有一个像素在更改经度时颜色错误。我尝试了很多方法来解决这个问题，比如使用如果s将错误的像素与其他像素分离，或者延迟错误像素的经度，但这两种方法都不起作用，有人能帮我吗？
var Canvas = document.getElementById("MainCanvas");
Canvas.style.imageRendering = "pixelated";
var Context = Canvas.getContext("2d");
var Sphere = {
radius: 80,
lat: 0,
long: 0
}
Render();
function Render()
{
let ImgData = Context.createImageData(Canvas.width, Canvas.height);
//Sphere.lat += 0.02;
Sphere.long += 0.01;
document.getElementById("Display").innerHTML = Sphere.long;
for(var y = 0; y != Canvas.height; y++)
{
for(var x = 0; x != Canvas.width; x++)
{
/*Get the true position*/
let TrueX = x - Canvas.width / 2;
let TrueY = Canvas.height / 2 - y;
/*Get the distance*/
let Dist = Math.sqrt(TrueX * TrueX + TrueY * TrueY);
if(Dist < Sphere.radius)
{
let C, CurrLat, CurrLong;
/*Get the depth of a sphere point*/
C = Math.asin(Dist / Sphere.radius);
/*Color the pixel*/
if(TrueX === 0 && TrueY === 0)
{
CurrLong = (Sphere.long) % (Math.PI);
CurrLat = (Sphere.lat) % (2*Math.PI);
}
else
{
/*Get the latitude (Clamped the value to 0 → π)*/
CurrLong = (Math.asin(Math.cos(C)*Math.sin(Sphere.long)+(TrueY*Math.sin(C)*Math.cos(Sphere.long))/Dist)) % Math.PI;
/*And the longitude (Clamped the value to 0 → 2π)*/
CurrLat = (Sphere.lat + Math.atan2((TrueX*Math.sin(C)), (Dist*Math.cos(C)*Math.cos(Sphere.long) - (TrueY*Math.sin(C)*Math.sin(Sphere.long))))) % (2*Math.PI);
}
ImgData.data[4*((y * Canvas.width)+x)] = (CurrLong / (Math.PI)) * 255;
ImgData.data[4*((y * Canvas.width)+x)+1] = 0;
ImgData.data[4*((y * Canvas.width)+x)+2] = (CurrLat / (Math.PI * 2)) * 255;
ImgData.data[4*((y * Canvas.width)+x)+3] = 255;
}
else
{
ImgData.data[4*((y * Canvas.width)+x)] = 200;
ImgData.data[4*((y * Canvas.width)+x)+1] = 200;
ImgData.data[4*((y * Canvas.width)+x)+2] = 200;
ImgData.data[4*((y * Canvas.width)+x)+3] = 255;
}
}
}
Context.putImageData(ImgData, 0, 0);
requestAnimationFrame(Render);
}#MainCanvas
{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url("https://c.tenor.com/k9yAts9ymaIAAAAM/loading-load.gif");
background-size: 100vw 100vh;
}
#Display
{
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="MainCanvas" width="400" height="200"></canvas>
<div id="Display"></div>
</body>
</html>好的，现在我明白了。经度的值必须在-π/2和π/2 之间