Question

我正在尝试使用Processing.js来显示全屏画布，但如果我将画布放入div以使其拉伸全屏或居中对齐或做任何有趣的事情，那么Processing.js抛出一个错误，说画布没有定义样式。

oldCursor = curElement.style.cursor,

这是抛出错误的行“未捕获的TypeError：无法读取未定义的属性'游标'”。

在下面的部分中，相同的代码应用于每个画布，我能看到的唯一区别是画布是子元素吗？

<html>
  <head>
    <title>Test</title>
    <script type="text/javascript" src="processing.js"></script>
    <script type="text/javascript" src="jquery-1.6.3.js"></script>
  </head>
  <body>
    <h1>Example of bug</h1>
    <script type="application/processing" id="sketch">
    void setup(){
      size(1280, 720);
      noFill();
      smooth();
      frameRate(50);
      background(255);
      strokeWeight(2);
    }

    void draw(){
        stroke(0,244,244/4);
        ellipse(5,10,52,52);
    }
    </script>
    <!-- Canvas Element -->
    <canvas style="text-align:center; cursor: pointer; background-color: red; z-index:     0; margin:  0px; padding: 0px;" width="1280" height="720" id="canvas">You do not support     canvas.</canvas>     
    <div>
        <canvas style="text-align:center; cursor: pointer; background-color: blue; z-    index: 0; margin:  0px; padding: 0px;" width="1280" height="720" id="canvasbug">You do not support canvas.</canvas>     
    </div>

    <!-- Sketch Initializer -->
    <script type="text/javascript">    (function () {
            var init = function () {
            // This works fine
            var canvas = $("#canvas");
            canvas.css("background-color", "pink");
            var sketch = $("#sketch").text;
            canvas.css("background-color", "orange");
            new Processing(canvas, sketch);
            canvas.css("background-color", "green");

            //This is bugged
            var canvas = $("#canvasbug");
            canvas.css("background-color", "pink");
            var sketch = $("#sketch").text;
            canvas.css("background-color", "orange");
            new Processing(canvas, sketch);
            canvas.css("background-color", "green");
        }
        addEventListener("DOMContentLoaded", init, false);
    })();
</script>
  </body>
</html>

Answer 1

您没有传递canvas元素，而是传递了一个jQuery对象。如果你这样做：

var canvas = $("#canvas")[0];
...
var canvasbug = $("#canvasbug")[0];

你会得到原始元素。

Processing.js - 画布放在div中时出错

1 个答案: