1、在画布上创建一个2d画笔，并用这个画笔在画布上绘送花寄语制一个矩形。
2、设置一个边界判断使这个盒子不能移出画布之外，只能在画布中移动。
注意：
不能直接在style中设置canvas的大小 直接设置大小的话，虽然改变了大小,但是图像也被拉伸变形。
特殊键值：
左:37 上:38 右:39 下：40
body部分
设置画布大小
<canvas id="can" width="500" height="500"></canvas>css样式部分
为画布设置一个边框线的大小与样式
<style> #can{ border: 1px soli公司资产评估d; } </style>javascript部分
<script> var can=document.getElementById('can')//获取对象 var pen=can.getContext('2d');//在画布中创建一个2d画笔 //x为水平方向的坐标 .fillRect(x,y,width,height) //y为垂直方向的坐标 var x=y=0; pen.fillRect(x,y,100,100); //绘制一个大小为100'被填充的'矩形 document.onkeydown=function(even){ //绑定按键事件 if(even.keyCode>=37&&even.keyCode<=40){ //判断按下的键值是否在37~40之间 pen.clearRect(x,y,100,100); //擦除上一个图形 switch(even.keyCode){ //匹配按下的键值 ca 37:x=x-10;break; //左 每次移动10 ca 38:y=y-10;break; //上 ca 39:x=x+10;break; //右 ca 40:y=y+10;break; //下 } //边界判断 if(x<0){ x=0; }el if(x>400){ x=400; } if(y<0){ y=0; }el if(y>400){ y=400; } pen.fillRect(x,y,100,100); } } </script><!DOCTYPE html><html lang="en"><head> <meta chart="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #can{ border: 1px solid; } </style></head><body> <canvas id="can" width="500" height="500"></canvas> <script> var can=document.getElementById('can')//获取对象 var pen=can.getContext('2d');//在画布中创建一个2d画笔 //x为水平方向的坐标 .fillRect(x,y,width,height) //y为垂直方向的坐标 var x=y=0; pen.fillRect(x,y,100,100); //绘制一个大小为100'被填充的'矩形 document.on指数运算法则公式keydown=function(even){ //绑定按键事件 if(even.keyCode>=37&&even.keyCode<=40){ //判断按下的键值是否在37~40之间 pen.clearRect(x,y,100,100); //擦除上一个图形 switch(even.keyCode){ //匹配按下的键值 ca 37:x=x-0的0次方10;珠宝加工日常break; //左 每次移动10 ca 38:y=y-10;break; //上 ca 39:x=x+10;break; //右 ca 40:y=y+10;break; //下 } //边界判断 if(x<0){ x=0; }el if(x>400){ x=400; } if(y<0){ y=0; }el if(y>400){ y=400; } pen.fillRect(x,y,100,100); } } </script></body></html>键盘按上下左右箭头就能移动矩形盒子
本文地址：https://blog.csdn.net/weixin_48291770/article/details/107497557
本文发布于:2023-04-03 18:48:07，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/4d2792a861b15e14fb822cac6f6a3722.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：在canvas(画布）上绘制一个矩形盒子并使用按键移动这个盒子.doc
本文 PDF 下载地址：在canvas(画布）上绘制一个矩形盒子并使用按键移动这个盒子.pdf
| 留言与评论（共有 0 条评论） |
