绘图上的JavaScript画布消失

我有一个canvas函数，如果我点击canvas字段并移动鼠标，它会绘制一个正方形，到目前为止，这是有效的

我的问题是，如果我释放鼠标并再次单击画布，旧绘制的矩形将消失

我怎样才能使旧画不消失呢

我的职能：

function foo() {

    var tool = this;
    this.started = false;

    var canvasx = canvas.offsetLeft;
    var canvasy = canvas.offsetTop;
    var last_mousex = 0;
    var last_mousey = 0;
    var mousex = 0;
    var mousey = 0;

    this.mousedown = function (ev) {
        if(checkboxSquare.checked) {
            last_mousex = parseInt(ev.clientX-canvasx);
            last_mousey = parseInt(ev.clientY-canvasy);
            context.strokeStyle = $('#selectColor').val();
            context.lineWidth = $('#selectWidth').val();
            tool.started = true;
        }
    };

    this.mousemove = function (ev) {
        if (tool.started && checkboxSquare.checked) {
            mousex = parseInt(ev.clientX-canvasx);
            mousey = parseInt(ev.clientY-canvasy);
            context.clearRect(0, 0, canvas.width, canvas.height); // clear canvas
            context.beginPath();
            var width = mousex-last_mousex;
            var height = mousey-last_mousey;
            context.rect(last_mousex,last_mousey,width,height);
            context.stroke();
        }
    };

    this.mouseup = function (ev) {
        if (tool.started && checkboxSquare.checked) {
            tool.mousemove(ev);
            tool.started = false;
        }
    };
}

---

它看起来是这样的：

我假设通过

setInterval

或

requestAnimationFrame

为每一帧调用

foo（）

函数。如果我的假设是正确的，那么之前绘制的正方形消失的原因是因为您只存储了一个矩形的x和y坐标，并且每次再次单击画布时，它都会被新矩形的新值覆盖

为了解决您的问题，您应该在mouseup上存储x和y坐标以及正方形的尺寸。这些坐标可以存储在数组中

var squares = [];

this.mouseup = function (ev) {
    // other code
    var square = { 
        x: last_mousex,
        y: last_mousey,
        width: mousex - last_mousex,
        height: mousey - last_mousey
    };
    squares.push(square);
};

现在，每次绘制正方形时，首先绘制存储在

squares

数组中的正方形

this.mousemove = function (ev) {
    if (tool.started && checkboxSquare.checked) {
        // other code
        context.clearRect(0, 0, canvas.width, canvas.height); // clear canvas

        // draw each square in the squares array after clearning the canvas
        squares.forEach(function(square) {
            context.beginPath();
            context.rect(square.x, square.y, square.width, square.height);
        });

        context.beginPath();
        var width = mousex - last_mousex;
        var height = mousey - last_mousey;
        context.rect(last_mousex, last_mousey, width, height);
        context.stroke();
    }
};

---

在绘制正方形时，您会看到一些代码重复，这是将其抽象为单独函数的好机会。

我假设通过

setInterval

或

requestAnimationFrame

为每一帧调用

foo（）

函数。如果我的假设是正确的，那么之前绘制的正方形消失的原因是因为您只存储了一个矩形的x和y坐标，并且每次再次单击画布时，它都会被新矩形的新值覆盖

为了解决您的问题，您应该在mouseup上存储x和y坐标以及正方形的尺寸。这些坐标可以存储在数组中

var squares = [];

this.mouseup = function (ev) {
    // other code
    var square = { 
        x: last_mousex,
        y: last_mousey,
        width: mousex - last_mousex,
        height: mousey - last_mousey
    };
    squares.push(square);
};

现在，每次绘制正方形时，首先绘制存储在

squares

数组中的正方形

this.mousemove = function (ev) {
    if (tool.started && checkboxSquare.checked) {
        // other code
        context.clearRect(0, 0, canvas.width, canvas.height); // clear canvas

        // draw each square in the squares array after clearning the canvas
        squares.forEach(function(square) {
            context.beginPath();
            context.rect(square.x, square.y, square.width, square.height);
        });

        context.beginPath();
        var width = mousex - last_mousex;
        var height = mousey - last_mousey;
        context.rect(last_mousex, last_mousey, width, height);
        context.stroke();
    }
};

您将在绘制正方形时看到一些代码重复，这是一个将其抽象为单独函数的好机会。

var点=[]；
var=0；
var sketch=document.querySelector（“#sketch”）；
var sketch_style=getComputedStyle（草图）；
//创建tmp画布
var tmp_canvas=document.createElement（'canvas'）；
var tmp_ctx=tmp_canvas.getContext（'2d'）；
tmp_canvas.id='tmp_canvas'；
tmp_canvas.width=parseInt（sketch_style.getPropertyValue（'width'）；
tmp_canvas.height=parseInt（sketch_style.getPropertyValue（'height'）；
草图.附件（tmp_画布）；
var canvas=document.createElement（'canvas'）；
var context=canvas.getContext（'2d'）；
canvas.id='paint'；
canvas.width=parseInt（sketch_style.getPropertyValue（'width'）；
canvas.height=parseInt（sketch_style.getPropertyValue（'height'）；
草图。附加子对象（画布）；
tmp_canvas.addEventListener（'mousedown'，mousedown，false）；
tmp_canvas.addEventListener（'mousemove'，mousemove，false）；
tmp_canvas.addEventListener（'mouseup'，mouseup，false）；
函数mousemove（e）{
如果（单击==1）{
x=e.layerX-this.offsetLeft；
y=e.layerY-这是偏移量；
showRect（x，y）；
}
}
函数showRect（x，y）{
tmp_ctx.clearRect（0，0，canvas.width，canvas.height）；//清除画布
tmp_ctx.beginPath（）；
变量宽度=x-点[0].x；
变量高度=y-点[0].y；
tmp_ctx.rect（点[0].x，点[0].y，宽度，高度）；
tmp_ctx.stroke（）；
}
功能鼠标向下（e）{
x=e.layerX-this.offsetLeft；
y=e.layerY-这是偏移量；
点推({
x,，
Y
});
点击++；
};
函数mouseup（）{
drawImage（tmp_画布，0,0）；
点击次数=0；
点长度=0；
}

html，正文{
宽度：100%；
身高：100%；
}
#素描{
边框：10px实心灰色；
身高：100%；
位置：相对位置；
}
#tmp_帆布{
位置：绝对位置；
左：0px；
右：0；
底部：0；
排名：0；
光标：十字线；
}

var点=[]；
var=0；
var sketch=document.querySelector（“#sketch”）；
var sketch_style=getComputedStyle（草图）；
//创建tmp画布
var tmp_canvas=document.createElement（'canvas'）；
var tmp_ctx=tmp_canvas.getContext（'2d'）；
tmp_canvas.id='tmp_canvas'；
tmp_canvas.width=parseInt（sketch_style.getPropertyValue（'width'）；
tmp_canvas.height=parseInt（sketch_style.getPropertyValue（'height'）；
草图.附件（tmp_画布）；
var canvas=document.createElement（'canvas'）；
var context=canvas.getContext（'2d'）；
canvas.id='paint'；
canvas.width=parseInt（sketch_style.getPropertyValue（'width'）；
canvas.height=parseInt（sketch_style.getPropertyValue（'height'）；
草图。附加子对象（画布）；
tmp_canvas.addEventListener（'mousedown'，mousedown，false）；
tmp_canvas.addEventListener（'mousemove'，mousemove，false）；
tmp_canvas.addEventListener（'mouseup'，mouseup，false）；
函数mousemove（e）{
如果（单击==1）{
x=e.layerX-this.offsetLeft；
y=e.layerY-这是偏移量；
showRect（x，y）；
}
}
函数showRect（x，y）{
tmp_ctx.clearRect（0，0，canvas.width，canvas.height）；//清除画布
tmp_ctx.beginPath（）；
变量宽度=x-点[0].x；
变量高度=y-点[0].y；
tmp_ctx.rect（点[0].x，点[0].y，宽度，高度）；
tmp_ctx.stroke（）；
}
功能鼠标向下（e）{
x=e.layerX-this.offsetLeft；
y=e.layerY-这是偏移量；
点推({
x,，
Y
});
点击++；
};
函数mouseup（）{
drawImage（tmp_画布，0,0）；
点击次数=0；
点长度=0；
}

html，正文{
宽度：100%；
身高：100%；
}
#素描{
边框：10px实心灰色；
身高：100%；
位置：相对位置；
}
#tmp_帆布{
位置：绝对位置；
左：0px；
右：0；
底部：0；
排名：0；
光标：十字线；
}

---

旧绘制的矩形会在单击时消失，因为每次绘制矩形之前都会清除整个画布

最简单的解决方法是将整个画布保存为mouseup上的图像，并在绘制每个矩形之前绘制该图像

var canva