canvas.addEventListener()

对 canvas 元素的事件监听用addEventListener()实现，

但是有一点缺陷是：canvas 不支持键盘事件，为了解决这个问题，可以采用以下两种方案：

 

方案一： key event ---- use window as object

　　通过window对象实现对canvas事件的监听和处理

　　window.addEventListener('keydown', doKeyDown, true);

注：扩大的事件触发的执行对象，可以通过取 canvas 元素的第一级父元素取代 window 对象

 

方案二：key event ----- use DOM element as object

　　通过在 canvas 元素上添加其它支持键盘事件的DOM元素属性，实现键盘事件支持，如使用 H5 的标签属性 tabindex

　　<canvas id='canvas' width='300' height='300' tabindex='-1'></canvas>

　　canvas.addEventListener('keydown', doKeyDown, true);

注：几乎所有浏览器均支持tabindex，除了 Safari，此为方案二的不足之处

 

转载于:https://www.cnblogs.com/s-qiu/p/7524976.html