Processing.js - divにキャンバスが配置されているときのエラー

Processing.jsを使用してキャンバスを取得しようとしていますが、キャンバスをdivに入れてフルスクリーンまたはセンターアライメントそれが興味深い場合、Processing.jsはキャンバスにスタイルが定義されていないというエラーをスローします。Processing.js - divにキャンバスが配置されているときのエラー

oldCursor = curElement.style.cursor,

これは、「Uncaught TypeError：未定義のプロパティ 'cursor'を読み取ることができません」というエラーをスローする行です。

以下のセクションでは、同じコードが各キャンバスに適用されていますが、キャンバスが子要素であることがわかりますか？

<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>

出典

2011-09-09 Kevin B

jQueryオブジェクトを渡しているキャンバス要素を渡していません。あなたがする場合：

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

生の要素を取得します。

出典

2011-09-09 17:56:49

生の要素を渡すとエラーは発生せず、最後のテストになります（bgを緑に設定すると処理が引き継がれます）。処理はレンダリングを開始していないようですか？ –

Processing.js - divにキャンバスが配置されているときのエラー

答えて

関連する問題