Javascript 如何将焦点更改为新的HTML5画布元素？

我的html文件中有一堆画布元素，如下所示：

   <canvas id="one"></canvas>
   <canvas id="two"></canvas>

我正在使用箭头键在

#one

周围移动一个对象，但我希望当对象到达

#one

上的某个点时，该对象“出现”在

#two

中，例如

x=150

和

y=55

。

---

当该坐标被触发时，我尝试使用jQuery

focus（）

方法，但该对象保持在

#one

中。有什么建议吗？

我认为您需要更改正在绘制的

元素（以及相关上下文），而不是在点击该坐标时更改焦点，例如：

    var theCanvas = document.getElementById("one");
    var context = theCanvas.getContext("2d");

    ... your canvas drawing code here ...

    if (posX < 150 && posY < 55) {
        //clear the top canvas
        context.clearRect(0, 0, theCanvas.width, theCanvas.height);
        // switch to the second canvas
        theCanvas = document.getElementById("two");
        context = theCanvas.getContext("2d");
    }

var theCanvas=document.getElementById（“一”）；
var context=canvas.getContext（“2d”）；
... 您的画布绘制代码在这里。。。
if（posX<150&&posY<55）{
//清除顶部画布
context.clearRect（0，0，canvas.width，theCanvas.height）；
//切换到第二个画布
canvas=document.getElementById（“两个”）；
context=canvas.getContext（“2d”）；
}

它借用了源代码。将圆拖动到顶部画布的左上角，它应该出现在下部画布中

---

要使画布元素能够聚焦，从而能够捕捉关键笔划，只需向元素添加一个

tabIndex

属性：

现在，您可以在元素之间使用TAB键，并将事件侦听器直接绑定到canvas元素

在处理程序内部，您只需根据所需的任何条件将其绘制到所需的画布

例子

var canvases=document.querySelectorAll（“canvas”），
i=0；
while（canvas=canvases[i++]）{
画布宽度=200；
canvas.tabIndex=0；
canvas.addEventListener（“键控”，过程）；
}
功能流程（e）{
var ctx=this.getContext（“2d”）；
ctx.clearRect（0,0,200,150）；
ctx.fillText（“此处键：+e.keyCode，10，10）；
}

canvas{border:1px solid#999；margin:0 2px 2px 0；display:inline block}

---

为了达到这个目的，没有聚焦在画布上这样的事情

您的两个画布都需要监听按键，而您的代码需要决定在哪个画布上绘制什么

var canvas1=document.getElementById（“一”）；
var context1=canvas1.getContext（“2d”）；
var canvas2=document.getElementById（“两个”）；
var context2=canvas2.getContext（“2d”）；
canvas1.width=canvas1.height=canvas2.width=canvas2.height=50；
var obj={x:5，y:5，w:5}；
函数绘图（）{
canvas1.width=canvas2.width=canvas2.width；
context1.beginPath（）；
context1.rect（对象x、对象y、对象w、对象w）；
context1.fillStyle='绿色'；
context1.fill（）；
context2.beginPath（）；
context2.rect（obj.x-canvas1.width，obj.y，obj.w，obj.w）；
context2.fillStyle='blue'；
context2.fill（）；
}
addEventListener（'keydown'，function（）{
如果（++obj.x>canvas1.width+canvas2.width）obj.x=5；
draw（）；
});
draw（）
canvas{边框：1px纯黑色；边距：10px；}

在此窗口内单击以获得焦点，然后按任意键将对象向右移动