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

How to draw image pixel by pixel, after confirmation of purchase, on a spiral path, in Javascript?

本文关键字：路径 像素 图像 绘制 螺旋 Javascript 确认      更新时间：2023-09-26

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

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

将使用Paypal，每个像素有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);

此处提供代码：http://jsfiddle.net/hitbyatruck/c4Kd6/

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

由于在处理画布和GUI方面经验不足，我需要使其高效且安全。

所以，我需要得到贝宝的确认触发图像处理，并在购买时引入价值。

所有这些都必须发生在一个网页上，而这个网页目前只是HTML和CSS。

任何帮助都将不胜感激。

据我所知，您不能仅基于任何客户端操作来实现这一点。您的问题源于这样一个事实，即您的客户端JS变量仅对查看页面的个人可用。多个页面视图只是指这些变量的多个独立且不相关的实例。客户端托管JS，所以一旦他们离开你的页面。。。他们交互的脚本（因此变量）都不见了。除非你把它们保存到你托管的地方，比如你的网络服务器（这是数据库或数据文件可能存在的地方）

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

关于保存文件，请查看此处：将javascript输出写入服务器上的文件

然后读回来，看看这里：如何使用JavaScript从服务器读取文本文件？

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

或者使用数据库，但同样需要进一步的服务器端工作：将数据从javascript发送到mysql数据库

相关文章：