当前位置： 移动技术网 > IT编程>网页制作>CSS > 在canvas(画布）上绘制一个矩形盒子并使用按键移动这个盒子

在canvas(画布）上绘制一个矩形盒子并使用按键移动这个盒子

2020年07月22日  | 移动技术网IT编程  | 我要评论

思路

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网