为什么drawImage和putImageData结果不一样？

Question

var cArr = document.querySelectorAll("canvas");
var ctx1 = cArr[0].getContext("2d");
var ctx2 = cArr[1].getContext("2d");
var ctx3 = cArr[2].getContext("2d");
ctx1.textAlign = "center";
ctx1.textBaseline = "middle";
ctx1.font = "bold 24px serif";
ctx1.strokeStyle = "blue";
cArr[0].onclick = function(event){
ctx1.strokeText("canvas",event.offsetX,event.offsetY);
var img = new Image();
img.onload = function(event){
ctx2.drawImage(img,0,0);
}
img.src = cArr[0].toDataURL();
var data = ctx1.getImageData(0,0,cArr[0].width,cArr[0].height);
ctx3.putImageData(data,0,0);
}

canvas1分别drawImage、putImageData到canvas2，canvas3。

Answer 1

结果其实是一样的，不过drawImage()是在Canvas上绘制图像，而不是覆盖，也就是不会清空之前的内容；按照你现在的代码，在每次drawImage之前清空下就行