在确认购买后，如何用Javascript在螺旋路径上逐像素绘制图像？

我正在处理一个非盈利组织的请求，以执行以下操作：

显示一张模糊的图片。当人们购买像素时，购买的像素数量应该沿着螺旋路径绘制在图像上

将使用贝宝，每个像素的成本为0.10欧元

我已经处理了螺旋的演变，这取决于纵横比。在这里检查我的功能：

var width = 150;
var height = 50;

var x = -(width - height)/2;
var y = 0;
var dx = 1;
var dy = 0;
var x_limit = (width - height)/2;
var y_limit = 0;
var counter = 0;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

setInterval(function(){
   if ((-width/2 < x && x <= width/2)  && (-height/2 < y && y <= height/2)) {
       console.log("[ " + x + " , " +  y + " ]");
       ctx.fillStyle = "#FF0000";
       ctx.fillRect(width/2 + x, height/2 - y,1,1);
   }
   if( dx > 0 ){//Dir right
       if(x > x_limit){
           dx = 0;
           dy = 1;
       }
   }
   else if( dy > 0 ){ //Dir up
       if(y > y_limit){
           dx = -1;
           dy = 0;
       }
   }
   else if(dx < 0){ //Dir left
       if(x < (-1 * x_limit)){
           dx = 0;
           dy = -1;
       }
   }
   else if(dy < 0) { //Dir down
       if(y < (-1 * y_limit)){
           dx = 1;
           dy = 0;
           x_limit += 1;
           y_limit += 1;
       }
   }
   counter += 1;
   //alert (counter);
   x += dx;
   y += dy;      
   }, 1);

var宽度=150；
var高度=50；
变量x=-（宽度-高度）/2；
var y=0；
var-dx=1；
var-dy=0；
var x_极限=（宽度-高度）/2；
var y_limit=0；
var计数器=0；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（'2d'）；
setInterval（函数（）{
如果（（-width/20）{//Dir up
如果（y>y_限制）{
dx=-1；
dy=0；
}
}
如果（dx<0）{//Dir left
如果（x<（-1*x_极限））{
dx=0；
dy=-1；
}
}
如果（dy<0）{//Dir向下，则为else
如果（y<（-1*y_极限））{
dx=1；
dy=0；
x_极限+=1；
y_极限+=1；
}
}
计数器+=1；
//警报（计数器）；
x+=dx；
y+=dy；
}, 1);

代码可在以下位置获得：

我的主要问题是如何实现这一点，而不需要每次从一开始就循环。我是否能够存储上次购买的坐标并从最后一点开始继续处理循环

我在处理画布和GUI方面不是很有经验，我需要使其高效和安全

因此，我需要获得贝宝确认触发图像处理，并在购买时引入价值

所有这些都必须发生在一个网页上，此时网页只是HTML和CSS

---

非常感谢您提供的任何帮助。

据我所知，您不能仅基于任何客户端操作来执行此操作。您的问题源于这样一个事实，即您的客户端JS变量仅对查看页面的个人可用。多个页面视图只是指这些变量的多个、独立和不相关的实例ables。客户端托管JS，因此一旦它们离开您的页面，它们与之交互的脚本（因此变量）就会消失。除非您将它们保存到您托管的位置，例如您的Web服务器（这是数据库或数据文件可以驻留的位置）

关于评论中的问题：
您可以保存该文件，然后在页面加载时读取它，但是如果需要，这将很难维护，并且有点混乱（IMO）

关于保存文件，请看这里：

然后，要重新阅读，请查看以下内容：

当然，这不是一个解决方案，但希望这是一个起点

---

---

或者使用数据库，但这同样需要进一步的服务器端工作：

您是否能够访问Web服务器，或者您只能使用客户端？您必须将上次购买的坐标存储在某种数据库中。在我们开发网站时，我将访问Web服务器。至于最后的坐标，我将她不使用任何SQL或类似的东西。我是否能够将它们存储在变量或文件中，只是为了简化数据库配置。谢谢你，40Alpha。我来看看。这并不能解决我的所有问题，但至少可以帮助我找到一个可能的解决方案。