Question

创建动画时，我尝试使用javascript来获得额外的效果，即雪被堆积并从前景的边缘掉落。我认为javascript可以对拥有该图片的<canvas>进行“计算”，然后将“雪”发送到php脚本，该脚本将创建png图片。这全部放在我的本地“服务器”上，因为这是唯一可以写文件的服务器。

<html>
<head>
<title>Making Snow</title>
</head>
<body bgcolor="black">
<canvas id="canvas" width="1920px" height="1080px"></canvas>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    var canvas;
    var ctx;
    var frame=-530;
    var simg = new Image()
    var dimg = new Image()
    onload = function()
    {
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        simg.src = "prodB/C/DGB.0530.png"
    }
    simg.onload = function()
    {
        var ipo=3;
        // Initialize all pixels on the screen/page
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(simg,0,0);
        document.title = "Making Snow " + (frame+530) + " / 7000";
        snowdraw();
    }
    dimg.onerror = function()
    {
        dimg.src = "../imagewriting/snow" + zeroFill(frame+530,4) + ".png";
    }
    dimg.onload = function()
    {
        frame++;
        if(frame<530)
            simg.src = "prodB/C/DGB.0530.png"
        else if(frame>4400)
            simg.src = "prodB/C/DGB.4400.png"
        else
            simg.src = "prodB/C/DGB." + zeroFill(frame,4) + ".png"
    }
    var snowdraw = function()
    {
            var temp;
            var canvasData = "";
//          console.log(screen);
            // Animation
            // Choose a random pixel at the top of the screen
            if(frame<7000)
            {
                for(ny=canvas.height-2; ny>=0; ny--)
                {   // Iterate through all the pixels starting from the bottom right corner.
                    for(nx=canvas.width-2; nx>=0; nx--)
                    {
                        canvasData=canvasData+"1";
                    }
                }
                $.ajax({
                    method: "POST",
                    url: "makesnow.php",
                    data:{ imgData: canvasData, frame: (frame+530)  }
                    })
                    .done(function( msg ) {
                        dimg.src = "../imagewriting/snow" + zeroFill(frame+530,4) + ".png";
                    });
            }
            else
            {
                document.title = "COMPLETE";
            }
    }

// http://stackoverflow.com/questions/1267283/how-can-i-create-a-zerofilled-value-using-javascript
// by Peter Bailey http://stackoverflow.com/users/8815
function zeroFill( number, width )
{
  width -= number.toString().length;
  if ( width > 0 )
  {
    return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
  }
  return number + ""; // always return a string
}
</script>

</html>

然而，在第1640帧（或更准确地说是frame=1110）ajax突然未定义。图片snow1640.png已创建，但浏览器会告诉我ajax is not defined并且不会超过Making Snow 1640 / 7000。由于每个“雪花”的随机性很小，我不能从我离开的地方捡起它，因为雪会从一个框架跳到另一个框架。虽然我确实在某一点尝试过，但是那个框架之后仍然停止了ajax。

我首先在运行Firefox（http://127.0.0.1/...）的本地计算机上运行它，然后转移到网络上另一台运行Chrome的功能更强大的计算机上，两者都在同一帧上死机。认为它可能是内存或文件限制所以我将完整的框架移出了那里。仍然没有。

编辑：代码现在只是解决问题。

此外，console.log和data的{{1}}似乎一般都是空的，无论是在成功的“渲染”期间还是在它开始迭代ajax.responseText时（每隔一行空，所有其他错误）。

编辑：新发展！事实证明，错误ajax is not defined无论如何在帧之间被调用（而在询问ReferenceError: ajax is not defined时是否创建了图像时是404）。

编辑：在dimg之后输入console.log($.ajax)并注释掉onload我得到simg.src。

错误仍然存在，这次我将其展开以显示以下内容：

function ajax()

编辑：将代码更改为现在使用Synchronous ajax。这次没有任何错误消息，但它仍然在1640停止。

经过一千次迭代后，ajax未定义

0 个答案: