其实游戏在动画的基础上增加了控制，也就是增加了键盘鼠标的事件监控。 添加事件的方法以前学过。添加键盘事件和普通节点对象的键盘事件一样，只是canvas中的鼠标事件需要稍微解决一下。 鼠标事件在鼠标事件中，鼠标指针位置的坐标是非常重要的属性。在鼠标事件中，只能获得相对于屏幕左上角和浏览器文档左上角的坐标，而canvas使用自己的坐标系，所以需要将获得的坐标转换成canvas中的坐标。 转换前先获取画布在浏览器中的位置，可以通过getBoundingClientRect方法获取。 例如，以下方法将浏览器中的坐标转换为canvas中的坐标:function converttocanvas (canvas，x，y){ var canvas element = canvas . getboundingclient()；return { x:(x-canvaselement . left)*(canvas . width/canvaselement . width)，y:(y-canvaselement . top)*(canvas . height/canvaselement . height)}；}转换逻辑:先用鼠标事件中相对于浏览器文档的坐标减去canvas左上角的坐标，然后进行相应的缩放。例:点中间的圆上5个点，点中间3个点。 & lt！DOCTYPE html & gt& lthtml lang = " en " & gt& lthead & gt& ltmeta charset="UTF-8 " >& ltmeta name = " viewport " content = " width =设备宽度，initial-scale=1.0 " >& lttitle & gt文档& lt/title & gt；& lt/head & gt；& ltbody & gt& ltcanvas id = ' c2d ' width = " 300 " height = " 300 " >浏览器不支持画布