js方向键控制图片旋转

在JavaScript中，你可以利用HTML5的Canvas API以及事件监听来实现图片的键盘方向键旋转功能。以下是一个简单的示例：

// 获取canvas元素和context
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 定义初始图片对象
var imgObj = new Image();
imgObj.src = 'your-image-url.jpg'; // 替换为你的图片URL

// 当图片加载完成后再处理旋转
imgObj.onload = function() {
    var imgX = canvas.width / 2;
    var imgY = canvas.height / 2;

    // 绑定方向键事件
    document.addEventListener('keydown', function(event) {
        switch (event.keyCode) {
            case 37: // 左箭头
                imgX -= imgObj.width;
                break;
            case 38: // 上箭头
                imgY -= imgObj.height;
                break;
            case 39: // 右箭头
                imgX += imgObj.width;
                break;
            case 40: // 下箭头
                imgY += imgObj.height;
                break;
        }

        // 清除画布并绘制新的图像位置
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.translate(imgX, imgY);
        ctx.rotate(event.deltaY * Math.PI / 180); // 使用deltaY来调整旋转角度（对于鼠标滚轮）
        ctx.drawImage(imgObj, 0, 0);
    });
};

// 防止在图片未加载完毕就触发事件
document.addEventListener('DOMContentLoaded', function() {
    imgObj.onload();
});

在这个例子中，我们监听了`keydown`事件，当用户按下左右上下的方向键时，会相应地改变图片的位置，并通过旋转矩阵变换来模拟图片的旋转效果。