如何将焦点更改为新的HTML5 Canvas元素？

我有一大堆的画布元素在我的HTML文件中像这样：如何将焦点更改为新的HTML5 Canvas元素？

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

我使用箭头键来移动物体周围#one，但我想有一个对象“出现”在#two时它在#one上遇到了一个点，例如x=150和y=55。我尝试使用jQuery focus()方法时触发该坐标，但对象留在#one。有什么建议么？

来源

2015-05-14 Peter Ward

要使画布元素焦点的，还为此能够捕捉到关键的招，只需添加一个tabIndex属性的元素：

现在，您可以TAB，并将事件侦听器直接绑定到画布元素。

在处理程序中，您只需根据所需的任何标准绘制到所需的画布。

例

var canvases = document.querySelectorAll("canvas"), 
 
    i = 0; 
 

 
while(canvas = canvases[i++]) { 
 
    canvas.width = 200; 
 
    canvas.tabIndex = 0; 
 
    canvas.addEventListener("keyup", process); 
 
} 
 

 
function process(e) { 
 
    var ctx = this.getContext("2d"); 
 
    ctx.clearRect(0, 0, 200, 150); 
 
    ctx.fillText("KEY HERE: " + e.keyCode, 10, 10); 
 
}

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

<canvas></canvas> 
 
<canvas></canvas> 
 
<canvas></canvas> 
 
<canvas></canvas> 
 
<canvas></canvas> 
 
<canvas></canvas>

来源

2015-05-15 02:35:42 K3N

而不是改变时坐标打击的重点，我认为你需要改变<canvas>元素（以及相关的上下文中）你绘制，例如：

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"); 
    }

Here's a fiddle从rectangleworld.com借用代码。将圆圈拖到顶部画布的左上角，它应该出现在下方的画布中。

JSFiddle

来源

2015-05-14 23:08:25 rphv

有作为焦点用于此目的的画布上没有这样的事情。

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

var canvas1 = document.getElementById("one"); 
 
var context1 = canvas1.getContext("2d"); 
 
var canvas2 = document.getElementById("two"); 
 
var context2 = canvas2.getContext("2d"); 
 

 
canvas1.width = canvas1.height = canvas2.width = canvas2.height = 50; 
 

 
var obj = {x: 5, y: 5, w: 5}; 
 

 
function draw() { 
 
    canvas1.width = canvas2.width = canvas2.width; 
 
    context1.beginPath(); 
 
    context1.rect(obj.x, obj.y, obj.w, obj.w); 
 
    context1.fillStyle = 'green'; 
 
    context1.fill(); 
 
    context2.beginPath(); 
 
    context2.rect(obj.x - canvas1.width, obj.y, obj.w, obj.w); 
 
    context2.fillStyle = 'blue'; 
 
    context2.fill(); 
 
} 
 

 
window.addEventListener('keydown', function() { 
 
    if(++obj.x > canvas1.width + canvas2.width) obj.x = 5; 
 
    draw(); 
 
}); 
 

 
draw();

canvas {border: 1px solid black; margin: 10px;}

<canvas id="one"></canvas> 
 
<canvas id="two"></canvas> 
 
<p>Click inside this window to get focus and then <br>press any key to move the object to the right</p>

当然，这可以优化将不会对每个节拍都重画的画布，但你的想法。

来源

2015-05-15 02:40:57 Shomz

如何将焦点更改为新的HTML5 Canvas元素？

回答

相关问题