+
95
-

js如何使用canvas鼠标拖动绘制方块并且可拖动?

js如何使用canvas鼠标拖动绘制方块并且可拖动?


网友回复

+
15
-
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Canvas拖动方块</title>
</head>

<body>

    <canvas id="canvas" width="500" height="500" style="border:1px solid red;"></canvas>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        let startX, startY; 
        let isDrawing = false;
     
        const rects = [];
        
      
        let selectedSquare = null;
            let offsetX, offsetY;
    
      function findSquare(x, y) {
          
         
                for (let i = rects.length - 1; i >= 0; i--) {
                    const square = rects[i];
                    if (x >= square.x && x <= square.x + square.w &&
                        y >= square.y && y <= square.y + square.h) {
                        return square;
                    }
                }
                return null;
            }
        
        canvas.addEventListener('mousedown', (e) => {
             const mouseX = e.clientX - canvas.getBoundingClientRect().left;
                const mouseY = e.clientY - canvas.getBoundingClientRect().top;
 ...

点击查看剩余70%

我知道答案,我要回答