HTML5 Canvas 绘图方法整理【十六、Canvas键盘事件、keyCode对照表】

忘是亡心i 2022-05-31 10:23 277阅读 0赞

#### 在Canvas中 键盘事件分为以下两种： ####

1、键盘按下 : keydown  
2、键盘松开 : keyup;

--------------------

附上一份 keyCode值对应表：  
![这里写图片描述][70]

--------------------

键盘事件其实也用的都是JavaScript 的语法：

window.addEventListener(type, fn, false);

type指的是事件类型， 也就是keydown 或者 keyup ;

addEventListener() 属于W3C标准 在IE9以上的都支持;  
(每次提到IE 都有想再倡导下 全民地址IE ……ಠ╭╮ಠ)

写一个比较好理解的示例代码

<script> window.onload=function () { let cans = document.getElementById("myCanvas"); let ctx = cans.getContext("2d"); drawPic(50 , 50); let x=50,y=50,key=getKey(); window.addEventListener("keydown",function (e) { ctx.clearRect(0,0,cans.width,cans.height); //根据键盘的keyCode值，设定重新绘图的坐标并绘制新的图片 switch (key.direction){ case "up": y-=2; drawPic(x,y); break; case "down": y+=2; drawPic(x,y); break; case "left": x-=2; drawPic(x,y); break; case "right": x+=2; drawPic(x,y); break; default: drawPic(x,y); } },false); function drawPic(x,y) { let image=new Image(); image.src="img/img23.jpg"; //必须在图片加载完后才能绘制 image.onload=function () { ctx.drawImage(image,x,y); } } function getKey(){ let key={}; window.addEventListener("keydown",function(e){ let keys=e.keyCode; if(keys== 38 ||keys==87){ key.direction="up"; }else if(keys==39 || keys==68){ key.direction="right"; }else if(keys==40 || keys ==83){ key.direction="down"; }else if(keys==37 || keys ==65){ key.direction="left"; }else{ key.direction=""; } },false); return key; } }; </script>

效果图： 每次按 上下左右时 图片都会对应的移动  
![这里写图片描述][70 1]

[70]: /images/20220531/22bed1805b4943dea456b955169fb2fe.png
[70 1]: /images/20220531/3e9fbdadc2164946b336b04378623ab9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 Canvas 绘图方法整理【十七、Canvas透明度 / 图形叠加、层次、冲突】

Canvas 设置透明度：语法： ctx.globalAlpha= 属性值; 属性值是 0 - 1之间的数字。同CSS一样的透明度属性值不过fillStyle

不念不忘少年蓝@/ 2022年05月31日 11:44/ 0 赞/ 564 阅读

相关 HTML5 Canvas 绘图方法整理【十六、Canvas键盘事件、keyCode对照表】

在Canvas中键盘事件分为以下两种： 1、键盘按下 : keydown 2、键盘松开 : keyup; -------------------- 附上一份 k

忘是亡心i/ 2022年05月31日 10:23/ 0 赞/ 278 阅读

相关 HTML5 Canvas 绘图方法整理【十五、Canvas页面交互：鼠标事件】

在Canvas中鼠标事件分为以下三种： 1、鼠标按下 : mousedown 2、鼠标松开 : mouseup; 3、鼠标移动 : mousemove 一般需要

ゞ浴缸里的玫瑰/ 2022年05月31日 10:15/ 0 赞/ 802 阅读

相关 HTML5 Canvas 开发绘图方法整理【十三、Canvas重点之：状态】

Canvas最重要的两个概念，一个是路径，另一个就是状态了。要知道，Canvas 是基于“状态”来绘制的，每次绘制（fill() 或 stroke() ）的时候都会检查

快来打我*/ 2022年05月31日 10:05/ 0 赞/ 233 阅读

相关 HTML5 Canvas 开发绘图方法整理【十二、Canvas重点之：路径】

Canvas 路径可以说是一个非常的！相当的！重要的东西，除了矩形，其他基本所有图形都是以路径为基础的。路径操作有三种方法： beginPath() 起始一条

川长思鸟来/ 2022年05月31日 09:49/ 0 赞/ 305 阅读

相关 HTML5 Canvas 开发绘图方法整理【十、Canvas渐变、图形渐变&&文字渐变】

基础渐变三部曲：语法： 1、创建渐变对象 ctx.createLinearGradient(x0,y0,x1,y1); x0,y0 渐变开始点坐标 x1,y

╰+哭是因爲堅強的太久メ/ 2022年05月31日 09:49/ 0 赞/ 297 阅读

相关 HTML5 Canvas 开发绘图方法整理【八、Canvas 转换】

Canvas 转换方法：所有单位默认为 “px ” ; 转换： Canvas 转换方法：所有单位默认为 “px ” ; translate() 重新映射画布上的

我不是女神ヾ/ 2022年05月31日 09:17/ 0 赞/ 263 阅读

相关 HTML5 Canvas 开发绘图方法整理【六、canvas image /canvas绘制图片、平铺图片】

绘制图片目前有三种调用的方式： 1、ctx.drawImage(image,dx,dy); //image 是要显示的图片 dx与 dy 是图片左上角的横坐标与纵坐标

喜欢ヅ旅行/ 2022年05月31日 09:05/ 0 赞/ 598 阅读

相关 HTML5 Canvas 开发绘图方法整理【二、canvas直线 & canvas矩形】

开始绘制图形之前有一点需要说一下，Canvas 采用的坐标系是W3C的坐标系： X轴正方向向右; Y轴正方向向下; 所有的绘制方向都以这个为准。

红太狼/ 2022年05月31日 07:50/ 0 赞/ 522 阅读

相关 HTML5 Canvas 绘图方法整理【十八、Canvas动画/ requestAnimationFrame() 兼容】

Canvas动画与一般的JS动画不太一样，因为它并不是用定时器 setInterval() 实现的，事实上，setInterval() 稍微存在一些性能问题，对于Ca

柔情只为你懂/ 2022年05月29日 01:15/ 0 赞/ 322 阅读