Processing.js - 将画布放置在 div 中时出错
我正在尝试获取使用Processing.js全屏显示的画布，但是如果我将画布放入div中以使其拉伸全屏或居中对齐或执行任何有趣的操作，则Processing.js会抛出错误说画布没有定义样式。
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>
I'm trying to get a canvas that is using Processing.js to appear fullscreen, but if I put the canvas into a div to get it to stretch fullscreen or center align it or do anything interesting, then the Processing.js throws an error saying the canvas has no style defined.
oldCursor = curElement.style.cursor,
This is the line throwing the error "Uncaught TypeError: Cannot read property 'cursor' of undefined".
In the below section, the same code is applied to each canvas and the only difference I can see, is that the canvas is a child element?
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您传递的不是一个 canvas 元素，而是一个 jQuery 对象。如果你这样做：
var canvas = $("#canvas")[0]; ... var canvasbug = $("#canvasbug")[0];你将获得原始元素。
You're not passing a canvas element, you're passing a jQuery object. If you do:
var canvas = $("#canvas")[0]; ... var canvasbug = $("#canvasbug")[0];You'll get the raw elements.