Question

您好我的项目中有这个功能来清理所有9个画布并选择分配给单击按钮。我使用了通过ID获取canvas的方法，然后在许多其他函数中通过clearRect获取上下文+清理它并且它没有问题但是在这里它不起作用并且日志说 - 没有指定画布。（善待我，我总是JS noob :)。

function cleanup() {

    setSelectValue('gtr', 'no');
    setSelectValue('color', 'no');
    setSelectValue('board', 'no');
    setSelectValue('in', 'no');
    setSelectValue('bind', 'no');
    setSelectValue('head', 'no');
    setSelectValue('pick', 'no');
    setSelectValue('tuner', 'no');
    setSelectValue('pot', 'no');
    setSelectValue('hw', 'no');
    setSelectValue('switch', 'no');

    var can = document.getElementById('myCanvas');
    var c = can.getContext('2d');
    c.clearRect(0, 0, canvas.width, canvas.height);

    var can1 = document.getElementById('myCanvas1');
    var c1 = can1.getContext('2d');
    c1.clearRect(0, 0, canvas.width, canvas.height);

    var can2 = document.getElementById('myCanvas2');
    var c2 = can2.getContext('2d');
    c2.clearRect(0, 0, canvas.width, canvas.height);

    var can3 = document.getElementById('myCanvas3');
    var c3 = can3.getContext('2d');
    c3.clearRect(0, 0, canvas.width, canvas.height);

    var can4 = document.getElementById('myCanvas4');
    var c4 = can4.getContext('2d');
    c4.clearRect(0, 0, canvas.width, canvas.height);

    var can5 = document.getElementById('myCanvas5');
    var c5 = can5.getContext('2d');
    c5.clearRect(0, 0, canvas.width, canvas.height);

    var can6 = document.getElementById('myCanvas6');
    var c6 = can6.getContext('2d');
    c6.clearRect(0, 0, canvas.width, canvas.height);

    var can7 = document.getElementById('myCanvas7');
    var c7 = can7.getContext('2d');
    c7.clearRect(0, 0, canvas.width, canvas.height);

    var can8 = document.getElementById('myCanvas8');
    var c8 = can8.getContext('2d');
    c8.clearRect(0, 0, canvas.width, canvas.height);

}

Answer 1

您的代码有拼写错误：

// in each clearRect use can1.width, can1.height
// instead of canvas.width, canvas.height

var can1 = document.getElementById('myCanvas1');
var c1 = can1.getContext('2d');
c1.clearRect(0, 0, can1.width, can1.height);  // not canvas.width, canvas.height

<强>另外...

清除所有画布的一种简单方法是在数组中引用所有画布。还将对所有上下文的引用放在另一个数组中。

然后你可以在cleanup（）函数中迭代这些数组并清除画布。

// save each canvas and context in arrays
var canvases=[];
var contexts=[];

// save all canvases and contexts in arrays
var canvas=document.getElementById("myCanvas"):
var context=canvas.getContext("2d");
canvases.push(canvas);
contexts.push(context);
//
for(var i=1;i<9,i++){
    var canvas=document.getElementById("myCanvas"+i):
    var context=canvas.getContext("2d");
    canvases.push(canvas);
    contexts.push(context);
}

// clear all canvases
function cleanup(){
    for(var i=0;i<contexts.length;i++){
        contexts[i].clearRect(0,0,canvases[i].width,canvases[i].height);
    }
}

Answer 2

如果您只想清除页面中的所有画布，可以执行以下操作：

for(var i = 0, c = document.getElementsByTagName('canvas'); i < c.length; i++)
    c[i].getContext('2d').clearRect(0,0,c[i].width, c[i].height);

短暂的分解：

在：

c = document.getElementsByTagName('canvas');

将您网页中所有可用的画布列为HTMLCollection（排序数组）。

然后使用index作为当前canvas元素本身遍历该数组，获取该画布的上下文并清除：

更多＆＃34;清洁代码＆＃34;做同样的版本看起来像这样，包含在一个可重用的函数中：

function clearAllCanvases() {

    var i = 0, canvas,
        canvases = document.getElementsByTagName('canvas')

    for(; canvas = canvases[i++];) {
        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
    }
}

JavaScript - 多个画布清洁功能

2 个答案: