我正在尝试将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);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句