Processing.js - div에 캔버스가있을 때의 오류

Processing.js를 사용하는 캔버스를 전체 화면으로 표시하려고하는데 캔버스를 div에 넣으면 전체 화면 또는 가운데 맞춤이 늘어납니다. 재미있는 것을하면, Processing.js는 캔버스에 정의 된 스타일이 없다는 에러를 던집니다.Processing.js - div에 캔버스가있을 때의 오류

oldCursor = curElement.style.cursor,

"Uncaught TypeError : 속성 'undefined의 커서'를 읽을 수 없습니다.

아래 섹션에서 동일한 코드가 각 캔버스에 적용되며 볼 수있는 유일한 차이점은 캔버스가 자식 요소라는 것입니까?

<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에 캔버스가있을 때의 오류

답변

관련 문제