欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-19 16:15:32
思路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