JavaScript 处理框架添加 NaN

javascript processing framework addition NaN

本文关键字：NaN 添加 框架 处理 JavaScript      更新时间：2023-09-26

我正在尝试将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 的行一定是问题所在。我从该表达式中得到"NaN"，尽管它是 3 个数值。有什么想法吗？

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

nx = x;
ny = y;
...
x+=((nX-x)/delay);
y+=((nY-y)/delay);
相关文章：