JavaScript鼠标、键盘交互事件的注册与移除

最新推荐文章于 2024-10-11 17:39:47 发布

Q_w7742

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量480

点赞数 14

文章标签： javascript 交互开发语言

本文链接：https://blog.csdn.net/Q_w7742/article/details/142071113

版权

需求说明

我希望页面上存在某个区域，点击之后执行某种效果（以显示文字为例）。

HTML代码说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hw2</title>
    <style>
        /* CSS */
        canvas{
            border-width:1px;
            border-style:solid;
            border-color:black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="800" height="400"></canvas>
    <script src="your/path.js"></script>
</body>
</html>

我希望在鼠标点击这个canvas或者键盘按下某个键之后在canvas中心位置显示一个字符“H”。

JavaScript部分

首先分析需求，为了显示字符H，我们首先要实现一个drawText()函数，Align设置center，Baseline设置middle等。

let text={  //对象的定义
    fontSize:64,
    align:'center',
    baseline:'middle',
    style:'red',
    text:'',
    x:0,
    y:0
};
function drawText(text){
    context.font=text.fontSize + 'px sans-serif';
    context.textAlign=text.align;
    context.textBaseline=text.baseline;
    context.fillStyle=text.style;
    context.fillText(text.text,text.x,text.y);
}

接下来我们需要注册鼠标、键盘监听：

canvas1.onclick=onCanvasClick;
window.onkeydown=onKeydown;

其中onCancasClick和onKeydown函数需要我们来实现，因为最终目的是一样的，我们就只编写onCanvasClick函数，onKeydown函数就调用onCanvasClick函数，而onCancasClick函数又可以调用drawText函数，只需要进行传参即可，具体代码如下：

function onCanvasClick(){  //事件处理函数
    //画红色的H
    text.text="H";
    text.x=canvas1.width/2;
    text.y=canvas1.height/2;
    drawText(text);
    //移除事件侦听
    canvas1.onclick=null;

}
function onKeydown(e){
    if(e.keyCode===13){
        onCanvasClick();
        windown.onkeydown=null;
    }
}

我们这样反复提取函数的目的是为了精简代码，提高代码可读性和可维护性。

再加上一些其它的代码补全内容，完整的JavaScript代码如下：

let canvas1=document.getElementById("myCanvas");
let context=canvas1.getContext('2d');

let text={  //对象的定义
    fontSize:64,
    align:'center',
    baseline:'middle',
    style:'black',
    text:'',
    x:0,
    y:0
};

function drawText(text){
    context.font=text.fontSize + 'px sans-serif';
    context.textAlign=text.align;
    context.textBaseline=text.baseline;
    context.fillStyle=text.style;
    context.fillText(text.text,text.x,text.y);
}

function drawLine(xs,ys,xe,ye,style){
    context.beginPath();//开启新路径
    context.moveTo(xs,ys);
    context.lineTo(xe,ye);
    context.strokeStyle=style;
    context.stroke();
}

function onCanvasClick(){  //事件处理函数
    //画红色的H
    text.text="H";
    text.x=canvas1.width/2;
    text.y=canvas1.height/2;
    text.style="red"；
    drawText(text);
    //移除事件侦听
    canvas1.onclick=null;

}

function onKeydown(e){
    if(e.keyCode===13){
        onCanvasClick();
        windown.onkeydown=null;
    }
}

function init(){
    //注册鼠标的click事件侦听
    canvas1.onclick=onCanvasClick;
    //注册键盘的keydown事件侦听
    window.onkeydown=onKeydown;
}

init();