Javascript 如何修复此图像（逐像素）失真问题？

我试图扭曲画布中显示的图像，使其看起来像一个“行星”。然而，我正在努力寻找解决失真问题的方法。想到的唯一解决办法是找到一种方法来减小

radiusDistance

变量，该变量越大。尽管如此，我不确定如何实现这一目标。有什么建议吗

以下是我目前用于实现此目的的数学和对象：

polarArray = [];
var polar = function(a,r,c){ //polar object, similar to pixel object.
    this.a = a; //angle
    this.r = r; //radius (distance)
    this.color = c; //color, stored using an object containg r,g,b,a variables
};
loopAllPixels(function(loop){//loop through every pixel, stored in a pixel array
    var pixel = loop.pixel;
    /*each pixel object is structured like this:
        pixel {
            x,
            y,
            color {
                r,
                g,
                b,
                a
            }
        }
    */
    var angle = pixel.x/360*Math.PI;
    var radiusDistance = pixel.y/Math.PI;
    polarArray.push(new polar(angle,radiusDistance,pixel.color));//store polar coordinate pixel + colour.
    pixel.color = new colorRGBA(255,255,255,255);//set background as white.
});
for (var i=0;i<polarArray.length;i++){//loop through polarArray (polar coordinate pixels + colour)
    var p = polarArray[i]; //polar pixel
    var x = (p.r*Math.cos(p.a))+(canvas.width/2); //x coordinate
    var y = (p.r*Math.sin(p.a))+(canvas.height/2); //y coordinate
    if (setpixel(x,y,p.color)==true){ //set pixel at location.
        continue;
    }
    break;

}
updatePixelsToContext();//draw to canvas

polarArray=[]；
var polar=函数（a，r，c）{//极性对象，类似于像素对象。
this.a=a；//角度
this.r=r；//半径（距离）
this.color=c；//color，使用包含r、g、b、a变量的对象存储
};
loopAllPixels（函数（loop）{//循环每个像素，存储在像素数组中
var pixel=loop.pixel；
/*每个像素对象的结构如下所示：
象素{
x,，
Y
颜色{
R
G
B
A.
}
}
*/
变量角度=像素x/360*Math.PI；
var radiusDistance=pixel.y/Math.PI；
polarArray.push（新极坐标（角度、半径距离、像素.颜色））；//存储极坐标像素+颜色。
pixel.color=新颜色RGBA（255255）；//将背景设置为白色。
});
对于（var i=0；i除了扫描图像中的每个像素外，还要扫描目标圆中的每个像素。使用目标的X和Y坐标定位源图像上的坐标，然后将目标设置为正确的值。嗯……你知道有什么好的算法可以创建圆，我可以使用我的像素对象？（注意：使用笛卡尔坐标…因为我看不到一种可实现的极坐标方法）…同样，使用这种方法，最终的产品不就是裁剪成圆形的源图像吗？（这不是目的）@blindman67您没有提供足够的信息来将cart转换为polar，只是
函数cart2Polar（x，y）{return{dir:Math.atan2（y，x），dist:Math.hypot（x，y）}
但是这与图像x，y的关系是未知的，因为您没有提供polarArray是如何填充的信息，（添加到polarArray的函数应该是渲染代码的一部分）使用polarArray存储图像非常困难..不，对不起，我的意思是可笑的，效率低下，我低估了它。在@Blindman67编写的所有函数中，你应该找到4个最接近的极坐标点，并对实际像素颜色进行双线性插值。（或双三次插值的16个最近点）