帆布中的清除问题答案

【问题标题】：Issues with clearRect in canvas帆布中的清除问题
【发布时间】：2013-12-01 19:25:31
【问题描述】：

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

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”，但它不起作用。我哪里错了？

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

观察控制台：有错误。
当您应该在 context2d 上调用它时，您确实在画布上调用了 clearRect。我认为从这一点开始你应该把所有的工作都做好，例如用 :

替换你的最后 3 个清算行

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

【讨论】：

哎呀，这是我的错误，谢谢..但我也在我的项目中做这样的事情，但它似乎不起作用。如果我清除 wrapperContext 它可以工作但不是画布。对此有什么想法吗？
我不确定我是否明白你的问题。事实上，除了改变它的大小或类似的东西之外，你不能在画布上做很多事情。您只能在画布的 context2D（或 webGL 上下文）上进行实际绘制操作。

【解决方案2】：

您的代码中有 2 个错误： 1- 画布不是上下文，所以它没有方法 clearRect 2 - 你应该用这些参数调用 clear rect 来清除葡萄（110,0,110,30）这个词；

你的代码应该是这样的：

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);

canvasWrapperContext.clearRect(110,0,110,30);
canvasContext.clearRect(110,30,110,30);

【讨论】：