js实现键盘组合键”键盘组合方向键控制物体移动“。本代码使用canvas，来实现键盘组合方向键控制物体移动方向（包括斜向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            margin: 0;
            height: 100%;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    let doc = document
    let cnv = doc.getElementById('canvas')
    let ctx = cnv.getContext('2d')

    cnv.height = doc.querySelector('body').offsetHeight
    cnv.width = doc.querySelector('body').offsetWidth


    function drawing(x, y) {
        ctx.beginPath()
        ctx.arc(x, y, 50, 0, 2 * Math.PI);
        ctx.stroke();
    }

    let movingSpeed = 5
    let moveX = 52
    let moveY = 52

    drawing(moveX, moveY)

    let obj = {}

    document.onkeyup = function (e) {
        if (obj[e.keyCode]) {
            obj[e.keyCode] = false
        }
    }

    document.onkeydown = function (e) {
        obj[e.keyCode] = true

        // 右 下
        if (obj[39] && obj[40]) {
            moveX += movingSpeed
            moveY += movingSpeed
            repaint(moveX, moveY)
        }
        // 右 上
        else if (obj[39] && obj[38]) {
            moveX += movingSpeed
            moveY -= movingSpeed
            repaint(moveX, moveY)
        }
        // 左 上
        else if (obj[37] && obj[38]) {
            moveX -= movingSpeed
            moveY -= movingSpeed
            repaint(moveX, moveY)
        }
        // 左 下
        else if (obj[37] && obj[40]) {
            moveX -= movingSpeed
            moveY += movingSpeed
            repaint(moveX, moveY)
        } else {
            // 上
            if (e.keyCode === 38) {
                moveY -= movingSpeed
                repaint(moveX, moveY)
            }
            // 下
            else if (e.keyCode === 40) {
                moveY += movingSpeed
                repaint(moveX, moveY)
            }

            // 左
            if (e.keyCode === 37) {
                moveX -= movingSpeed
                repaint(moveX, moveY)
            }
            // 右
            else if (e.keyCode === 39) {
                moveX += movingSpeed
                repaint(moveX, moveY)
            }
        }
    }

    function repaint(x, y) {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        drawing(x, y)
    }
</script>
</body>
</html>