Question

我目前正在使用画布遇到一些问题。加载Processing.js草图时，需要用户单击画布一次才能选择它。是否有任何关于页面加载自动选择的变通方法。我一直在关注自动对焦，但我希望有一个支持跨浏览器实现的修复程序。任何建议将不胜感激。

非常感谢!!!

更新!!!例如我正在运行的代码...（我已经将void设置和空白空白留空）

<!DOCTYPE html>
<html>
<head>

<style>
/* Removes focus outline from canvas */
canvas:focus{outline:none;} 
</style>

<script src= "http://code.jquery.com/jquery-1.11.0.min.js">
</script> 

<!-- This is the processing canvas------------------------- -->
<script src="processing.js"></script>
<script type="text/processing" data-processing-target="myCanvas">

PShape boy;
PShape girl;

void setup(){......}
void draw(){......}

</script>
</head>
<body>
<div>
<canvas id="myCanvas"></canvas>
</div>
</body>
</html>

更新！

这是我在尝试使用markE＆＃39的方法时收到的错误。

Error screenshot

Answer 1

默认情况下，canvas元素未分配tabindex。因此无法获得关注：

要获得焦点，您可以在画布上设置tabindex。

// get a reference to the canvas
var canvas=document.getElementById('canvas');

// set canvas to be a tab stop (necessary to get events)
canvas.setAttribute('tabindex','0');

// set focus to the canvas so keystrokes are immediately handled
canvas.focus();

Answer 2

我认为在将canvas元素添加到您的页面之前，脚本正在运行。由于您正在使用jQuery，因此可以尝试将其包装在document.ready()函数

中

$(document).ready(function(){
    PShape boy;
    PShape girl;

    void setup(){......}
    void draw(){......}
});

在浏览器上自动选择<canvas>？</canvas>

2 个答案: