javascript - 如何清理画布并重新绘制

Question

所以我做了一个简单的例子，如果你点击一个画布，它会一直画随机线，它还会将当前状态推入_history变量，一旦你点击“获取上一个”按钮，它就会弹出上一个状态。

var _history = []
var canvas = document.getElementsByClassName('canvas')[0];
var ctx = canvas.getContext('2d');
			
canvas.addEventListener('click', generateLine, false);

var btn = document.getElementsByClassName('btn')[0];

btn.addEventListener('click', loadPrevious, false);

var img = document.getElementsByClassName('img')[0];


function generateLine() {
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(Math.random() * 200, Math.random() * 200);
    ctx.stroke();
	
	var value = canvas.toDataURL();
	console.log(value);
	_history.push(value);
}

function loadPrevious() {
	_history.pop();
	var value = _history.pop();
	
	img.src = value;
	
	// clear data
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	
	// re-draw
	ctx.drawImage(img, 0, 0);
}

.canvas {
	width: 100px;
	height: 100px;
	border: 1px solid black;
}

.app {
	text-align: center;
}

img {
	display: none;
}

<div class="App">
	<img alt="test" class="img" />
	Click on the image to draw random: <br />
	<canvas class="canvas"></canvas>
	<br />
	<button class="btn">load previous state</button>
</div>

_history数组很好，当我弹出一个状态时，它会返回一个很好的 URI 图像，但我认为将状态“加载”到画布的部分被破坏了。

我该如何解决？

标签： javascripthtmlcanvas

Answer 1

调用内存中的图像是异步的，因此您需要将其包装在一个img.onload函数中。

var _history = []
var canvas = document.getElementsByClassName('canvas')[0];
var ctx = canvas.getContext('2d');

canvas.addEventListener('click', generateLine, false);

var btn = document.getElementsByClassName('btn')[0];

btn.addEventListener('click', loadPrevious, false);

var img = document.getElementsByClassName('img')[0];


function generateLine() {
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(Math.random() * 200, Math.random() * 200);
    ctx.stroke();

    var value = canvas.toDataURL();
    console.log(value);
    _history.push(value);
}

function loadPrevious() {
    _history.pop();
    var value = _history.pop();

    img.src = value;

    // clear data
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // re-draw
    img.onload = function() {
      ctx.drawImage(img, 0, 0);
    };
    
}

<style>
.canvas {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

.app {
    text-align: center;
}

img {
    display: none;
}
</style>

<div class="App">
    <img alt="test" class="img" />
    Click on the image to draw random: <br />
    <canvas class="canvas"></canvas>
    <br />
    <button class="btn">load previous state</button>
</div>