Question

每当我尝试使用clearRect（）清除画布时，首先会清除它。但是一旦我开始重新绘制旧元素就会重新出现。我甚至试过

context.width = context.width

但似乎没有任何效果。画布最初被清除，但是在单击清除按钮时，它首先会清除，但一切都会重新出现。请帮我调试这个错误。 clearRect方法位于代码的末尾。

以下是代码

<script>
        var canv = document.getElementById('canv'),
            ctx = canv.getContext('2d'),
            rect = [],
            move = false;
        var newRect;
        var startX, startY, mouseX, mouseY;
        var offsetX,offsetY;
        function reOffset(){
            var bound = canv.getBoundingClientRect();
            offsetX = bound.left;
            offsetY = bound.top;        
        }
        reOffset();
        function movement(){
            canv.addEventListener('mousedown', mouseDown, false);
            canv.addEventListener('mouseup', mouseUp, false);
            canv.addEventListener('mousemove', mouseMove, false);
        }
        function mouseDown(event){

            startX=parseInt(event.clientX-offsetX);
            startY=parseInt(event.clientY-offsetY);
            move = true;

        }
        function mouseUp(event){
            mouseX=parseInt(event.clientX-offsetX);
            mouseY=parseInt(event.clientY-offsetY);
            move = false;
            if(!overlap(newRect)){
                rect.push(newRect);
            }
            make();
            //ctx.fillRect(q.left,q.top,q.right-q.left,q.bottom-q.top);
        }

         function make(){
            for(var i = 0; i < rect.length; i++){
                var q = rect[i];
                ctx.fillStyle = randomColour();
                ctx.fillRect(q.left, q.top, q.right - q.left, q.bottom - q.top);
            }
        }
        function mouseMove(event){

            if(move){
                mouseX=parseInt(event.clientX - offsetX);
                mouseY=parseInt(event.clientY - offsetY);

                newRect = {
                    left : Math.min(startX , mouseX),
                    right : Math.max(startX , mouseX),
                    top : Math.min(startY , mouseY),
                    bottom : Math.max(startY , mouseY),
                }
                ctx.clearRect(0, 0, canv.width, canv.height);
                ctx.strokeRect(startX, startY, mouseX-startX, mouseY-startY);
            }
        }
        function randomColour() {
            var colour = [];
            for (var i = 0; i < 3; i++) {
                colour.push(Math.floor(Math.random() * 256));
            }
            return 'rgb(' + colour.join(',') + ')';
        }

        function overlap(newRect){
            var q1 = newRect;

            //if one rect is completely inside another rect
            var inside = function(rectx, recty){
                return(recty.left >= rectx.left && 
                       recty.right <= rectx.right && 
                       recty.top >= rectx.top &&
                       recty.bottom <= rectx.bottom);
            }

            //if the new rect is overlapping any existing rect
            var isOverlaping = false;
            for(var i = 0; i < rect.length; i++){
                var q2 = rect[i];
                var isIntersecting = !(q1.left > q2.right ||
                                       q1.right < q2.left ||
                                       q1.top > q2.bottom ||
                                       q1.bottom < q2.top);
                var isContain = inside(q2, q1) || inside(q1, q2);
                if(isIntersecting || isContain){
                    isOverlaping=true;
                }
            }
            return(isOverlaping);
        }
        movement();

        //clear the canvas for redrawing

        document.getElementById('clear').addEventListener('click', function () {
            ctx.clearRect(0, 0, canv.width, canv.height);
        }, false);      

    </script>`

<head>
    <title>Simple Paint App</title>
</head>
<body>
    <canvas id ="canv" width="1000" height="600" ></canvas>
    <div id="button" style="position: absolute;">
    <input type="button" id="clear" value="Clear">
    </div>
</body>

Answer 1

您还需要重置rect数组。

将此添加到您的清除回调函数：

document.getElementById('clear').addEventListener('click', function () {
            rect = [];
            console.log(rect);
            ctx.clearRect(0, 0, canv.width, canv.height);
        }, false);

应该工作，同时删除rect数组的重置（如在清除回调函数中），也记录旧的矩形。

使用clearRect（...）

1 个答案: