0
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>
원시 요소를 전달하면 오류가 발생하지 않고 최종 테스트가 수행됩니다 (bg를 녹색으로 설정하면 처리가 정상적으로 처리됩니다.) 처리가 렌더링을 시작하지 않는 것 같습니다. –