JavaScript Canvas 绘制时消失

Question

我有一个 Canvas 函数，如果我单击 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;
        }
    };
}

看起来像这样:http://jsfiddle.net/AbdiasSoftware/kqW4X/

Answer 1

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

最简单的解决方法是将整个 Canvas 保存为鼠标按下时的图像，并在绘制每个矩形之前绘制该图像。

var canvas;
var _foo = new foo();
canvas.onmousedown = _foo.mousedown;
canvas.onmousemove= _foo.mousemove;
canvas.onmouseup = _foo.mouseup;

function foo() {

	canvas = $('#canvas')[0];
	var context = canvas.getContext('2d');
	var checkboxSquare = $('#checkboxSquare')[0];
	var img = new Image();
	
    var tool = this;
    this.started = false;

    var last_mousex = 0;
    var last_mousey = 0;
    var mousex = 0;
    var mousey = 0;

    this.mousedown = function (ev) {
        if(checkboxSquare.checked) {
            last_mousex = ev.offsetX;
            last_mousey = ev.offsetY;
            context.strokeStyle = $('#selectColor').val();
            context.lineWidth = $('#selectWidth').val();
            tool.started = true;
        }
    };

    this.mousemove = function (ev) {
        if (tool.started && checkboxSquare.checked) {
            mousex = ev.offsetX;
            mousey = ev.offsetY;
            context.clearRect(0, 0, canvas.width, canvas.height); // clear canvas
            context.drawImage(img, 0, 0); // draw saved canvas (image)
			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);
			img.src = canvas.toDataURL(); // save canvas as image
            tool.started = false;
        }
    };
}

canvas {
  border: 1px solid black;
  cursor: default;
  margin-top: 5px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkboxSquare">Square | Color
<select id="selectColor">
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
</select> | Width
<select id="selectWidth">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<canvas id="canvas" width="400" height="400"></canvas>