在canvas(画布）上绘制一个矩形盒子并使用按键移动这个盒子
程序员文章站
2022-03-20 23:25:39
思路1、在画布上创建一个2d画笔，并用这个画笔在画布上绘制一个矩形。2、设置一个边界判断使这个盒子不能移出画布之外，只能在画布中移动。注意：不能直接在style中设置canvas的大小 直接设置大小的话，虽然改变了大小,但是图像也被拉伸变形。特殊键值：左:37 上:38 右:39 下：40代码分解body部分设置画布大小css样式部分为画布设置一...
思路
1、在画布上创建一个2d画笔，并用这个画笔在画布上绘制一个矩形。
2、设置一个边界判断使这个盒子不能移出画布之外，只能在画布中移动。
注意：
不能直接在style中设置canvas的大小 直接设置大小的话，虽然改变了大小,但是图像也被拉伸变形。
特殊键值：
左:37 上:38 右:39 下：40
代码分解
body部分
设置画布大小
<canvas id="can" width="500" height="500"></canvas>
css样式部分
为画布设置一个边框线的大小与样式
<style>
#can{
border: 1px solid;
}
</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){ //匹配按下的键值
case 37:x=x-10;break; //左 每次移动10
case 38:y=y-10;break; //上
case 39:x=x+10;break; //右
case 40:y=y+10;break; //下
}
//边界判断
if(x<0){
x=0;
}else if(x>400){
x=400;
}
if(y<0){
y=0;
}else if(y>400){
y=400;
}
pen.fillRect(x,y,100,100);
}
}
</script>
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="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.onkeydown=function(even){ //绑定按键事件
if(even.keyCode>=37&&even.keyCode<=40){ //判断按下的键值是否在37~40之间
pen.clearRect(x,y,100,100); //擦除上一个图形
switch(even.keyCode){ //匹配按下的键值
case 37:x=x-10;break; //左 每次移动10
case 38:y=y-10;break; //上
case 39:x=x+10;break; //右
case 40:y=y+10;break; //下
}
//边界判断
if(x<0){
x=0;
}else if(x>400){
x=400;
}
if(y<0){
y=0;
}else if(y>400){
y=400;
}
pen.fillRect(x,y,100,100);
}
}
</script>
</body>
</html>
键盘按上下左右箭头就能移动矩形盒子
本文地址：https://blog.csdn.net/weixin_48291770/article/details/107497557