javascript - Canvas 中的clearRect问题

Question

我正在尝试使用clearRect清除 Canvas 的一部分，但它似乎不起作用。

JSFiddle - http://jsfiddle.net/6BJaV/

var canvasWrapper = document.createElement('canvas');
var canvasWrapperContext = canvasWrapper.getContext('2d'); 
canvasWrapper.width = 300;
canvasWrapper.height = 300;


var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 300;
canvasContext.font = "bold 20pt arial";
canvasContext.fillText("APPLE",0,30);
canvasContext.fillText("GRAPE",110,30);

canvasWrapperContext.drawImage(canvas,0,0,canvas.width,canvas.height);

document.body.appendChild(canvasWrapper);

//clear a part of canvas
canvas.clearRect(110,30,110,30);   //clear the text grape
canvasWrapper.clearRect(0,0,canvasWrapper.width,canvasWrapper.height);
canvasWrapperContext.drawImage(canvas,0,0,canvas.width,canvas.height);

在上面的代码中，我试图清除工作“GRAPE”，但它不起作用。我哪里出错了？

Answer 1

观察控制台:有错误。
当您应该在 context2d 上调用它时，您确实在 Canvas 上调用了clearRect。我认为从现在起你应该把所有的工作都做好了，例如将最后 3 行清除行替换为:

 canvasWrapperContext.clearRect(0,0,210,30);