Question

我无法弄清楚为什么这个处理草图在某些浏览器中不起作用。它适用于Firefox，但它不能在Safari和Chrome中运行。

我将代码放在我网站上的脚本标记内，并按照处理网站http://processingjs.org/articles/PomaxGuide.html上的建议定位“画布”。起初，草图似乎工作正常。但是一旦我尝试使用其他浏览器，我遇到了麻烦。在Safari中它根本不会加载。

这似乎是一个相对简单的草图，所以我真的不确定问题出在哪里......

这是草图：

float b = 4;
float c = 8;

int x = 10;
int k = 3;
int f = 1;

  void setup() {
    size(755, 685, P3D);
    fill(190);
  }

  void draw() {
    background(0, 102, 102);
    translate(width/2, height/2);

    strokeWeight(2);
    noFill();
    rect(-width/2, -height/2, 755, 685);
    rect((-width/2) + 7, (-height/2) + 7, 741, 671);

    noStroke();
    fill(255, 204, 51);
    rect((-width/2) + 40, -height/2, 20, 7);
    rect((-width/2) + 120, -height/2, 20, 7);
    rect((-width/2) + 200, -height/2, 20, 7);
    rect((-width/2) + 280, -height/2, 20, 7);
    rect((-width/2) + 360, -height/2, 20, 7);
    rect((-width/2) + 440, -height/2, 20, 7);
    rect((-width/2) + 520, -height/2, 20, 7);
    rect((-width/2) + 600, -height/2, 20, 7);
    rect((-width/2) + 680, -height/2, 20, 7);
    rect((-width/2) + 40, (-height/2) + 678, 20, 7);
    rect((-width/2) + 120, (-height/2) + 678, 20, 7);
    rect((-width/2) + 200, (-height/2) + 678, 20, 7);
    rect((-width/2) + 280, (-height/2) + 678, 20, 7);
    rect((-width/2) + 360, (-height/2) + 678, 20, 7);
    rect((-width/2) + 440, (-height/2) + 678, 20, 7);
    rect((-width/2) + 520, (-height/2) + 678, 20, 7);
    rect((-width/2) + 600, (-height/2) + 678, 20, 7);
    rect((-width/2) + 680, (-height/2) + 678, 20, 7);
    rect(-width/2, (-height/2) + 45, 7, 20);
    rect(-width/2, (-height/2) + 127, 7, 20);
    rect(-width/2, (-height/2) + 209, 7, 20);
    rect(-width/2, (-height/2) + 291, 7, 20);
    rect(-width/2, (-height/2) + 373, 7, 20);
    rect(-width/2, (-height/2) + 445, 7, 20);
    rect(-width/2, (-height/2) + 527, 7, 20);
    rect(-width/2, (-height/2) + 609, 7, 20);
    rect((-width/2) + 748, (-height/2) + 45, 7, 20);
    rect((-width/2) + 748, (-height/2) + 127, 7, 20);
    rect((-width/2) + 748, (-height/2) + 209, 7, 20);
    rect((-width/2) + 748, (-height/2) + 291, 7, 20);
    rect((-width/2) + 748, (-height/2) + 373, 7, 20);
    rect((-width/2) + 748, (-height/2) + 445, 7, 20);
    rect((-width/2) + 748, (-height/2) + 527, 7, 20);
    rect((-width/2) + 748, (-height/2) + 609, 7, 20);


    rotateY(map(mouseX, 0, width, -PI, PI));
    //rotateX(map(mouseY, 0, height, -PI, PI));
    rotateZ(map(mouseY, 0, height, -PI, PI));
    //rotateX(PI/4);
    //rotateZ(1);


    scale(25);
    stroke(255, 204, 51);

    strokeWeight(1);
    line(-width/2, 0, width/2, 0);
    line(0, -height/2, 0, height/2);

    strokeWeight(5);
    point(1 + f + b, -12 + k + b, 3 + x + b);
    point(1 + f + b, -13 + k + b, 3 + x + b);
    point(-4 + f + b, -12 + k + b, -1 + x + b);
    point(4 + f + c, -12 + k + c, 4 + x + c);
    point(2 + f + c, -9 + k + c, 1 + x + c);

  }

知道为什么吗？

Answer 1

到目前为止，

在所有浏览器中都适合我。如果你把它放在小提琴里，

<script type="text/processing">
  // ...your code here
</script><canvas></canvas>

就像这里http://jsfiddle.net/7RGHL一样，并在各种浏览器中加载它们，它们都可以正常工作。由于您没有包含用于在页面上运行的HTML代码，因此无法说出您做错了什么，但至少处理代码很好。

Answer 2

我在chrome中遇到了同样的问题，它没有在线工作但它在线（不知道为什么），在safari中你需要去safari / preferences / advanced并激活开发菜单。一旦你拥有它，你就可以以这种方式激活WebGL，解决问题。

PS：很抱歉，如果菜单中的单词不完全一样，我用西班牙语...

我不能让这个Processing.js草图工作？

2 个答案: