论文 js 成 javascript

Question

下面是我试图在圆网格上获得色调属性的代码。

var circles = [];

for(var i=20 ; i<=1500 ; i+=100){
  for(var j=40 ; j<=600 ; j+=110){
    var newCircle = new Path.Circle(new Point(i, j), 20);
    newCircle.fillColor = 'red';
    circles.push(newCircle);
  }
}

function onFrame(event){
  for(var i=0 ; i<circles.length ; i++ ){
    circles[i].fillColor.hue += 1;
  }
}

这是代码。现在我正在尝试使用我在单独的 JS 文件中创建的随机颜色函数为每个圆圈赋予不同的颜色，但是像 "num" 这样的变量在那个 js file.I 中无法访问 link他们。

这是 link 代码笔：https://codepen.io/akashyap/pen/qMgpGQ

我无法理解 :

的“直接将 paperscript 与 javascript 一起使用”部分

http://paperjs.org/tutorials/getting-started/using-javascript-directly/

Answer 1

您运行遇到了时间问题。当你的普通 JS 运行s 时，circles 还没有定义。那是因为您的论文脚本位于 <script type="text/paperscript"> 元素内。浏览器本身不支持此功能，因此不会立即运行。相反，在您加载 paper.js 一段时间后，它最终会读取您的脚本元素并对其进行解释。

您需要确保在定义之前不要尝试访问 circles。如果无法预测您的 paperscript 何时准备就绪，您可以使用 callback 在 paperscript 运行时通知外部 JS。例如，如果您将此添加到您的论文中：

if (window.onCirclesReady)
  window.onCirclesReady(circles);

...你可以把你的 JS 包装成这样：

window.onCirclesReady = circles => {
  // Code here
};

这解决了两个问题。首先，你知道你的 JS 代码不会运行直到 paperscript 有运行。其次，您正在传递 circles 数组，因此您不必使用全局变量来使其可访问。您可以根据需要扩展回调以传递其他数据。

The updates to your CodePen are here

论文 js 成 javascript

paper js into javascript

javascript

paperjs