Question

我试图将javascript处理框架与html5画布一起使用，但我有一个简单添加3个数字变量的问题，我无法弄明白。这是代码：

var radius = 50.0;

var x, y;
var nX, nY;
var delay = 16.0;

// Simple way to attach js code to the canvas is by using a function
function sketchProc(processing) {


processing.size(200,200);
processing.strokeWeight(10);
processing.frameRate(15);
x = processing.width/2.0;
y = processing.height/2.0;
nx = x;
ny = y;



  // Override draw function, by default it will be called 60 times per second
  processing.draw = function() {

    radius = radius + Math.sin(processing.frameCount/4);

    x+=((nX-x)/delay);
    y+=((nY-y)/delay);

    processing.background(100);

    processing.fill(0,121,184);

    processing.stroke(255);

    processing.ellipse(x,y,radius,radius);
  };


  processing.mouseMoved = function(){
        nX = processing.mouseX;
        nY = processing.mouseY;

    }
}

var canvas = document.getElementById("canvas1");
// attaching the sketchProc function to the canvas
var p = new Processing(canvas, sketchProc);
// p.exit(); to detach it

添加x和y的行必须是问题。我得到了＆＃34; NaN＆＃34;从该表达式中可以看出它的3个数值。任何想法？

Answer 1

JavaScript标识符区分大小写，因此nx和ny与nX和nY不同：

nx = x;
ny = y;

...

x+=((nX-x)/delay);
y+=((nY-y)/delay);

javascript处理框架添加NaN

1 个答案: