我如何清除畫布？

Question

由於某些嚴重原因，我無法執行

canvas.width = canvas.width;

這是我的代碼：

function startDraw(){
document.getElementById('PaintArea').setAttribute('onmousemove', 'getMouse(event)');
}
function stopDraw(){
document.getElementById('PaintArea').setAttribute('onmousemove', '');
}
function Paint(){
var Size = document.getElementById('Size').value;
var Opacity = document.getElementById('opa').value;
var color = document.getElementById('color').value;
canvas = document.getElementById('PaintArea');
if(canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = color;
    ctx.globalAlpha = Opacity;
    ctx.beginPath();
    ctx.arc(musX-10, musY-10, Size, 0, Math.PI*2); 
    ctx.closePath();
    ctx.fill();
}
}

function clear(){       
canvas.width = canvas.width;
}

function getMouse(event) {
musY = event.clientY;
musX = event.clientX;
Paint();
}

按鈕：

<button onclick="clear()">Clear</button>

在chrome控制台中，它說：“不建議使用document.clear（）。此方法不執行任何操作。”

我也有這些全局變量：

var musX;
var musY;
var canvas; 

Answer 1

根據錯誤消息猜測...請嘗試以下操作：

<button onclick="window.clear();">Clear</button>

如果clearCanvas() ，請考慮使用不太模糊的函數名稱，例如clearCanvas()

Answer 2

 <button onclick="clear()">Clear</button> 

在chrome控制台中，它說：“反對使用document.clear（）。此方法不執行任何操作。”

您已經遇到了遺留范圍鏈擴充問題 。

在這種情況下， clear是主機定義的document屬性所引用的對象的屬性名稱，該名稱在事件處理程序屬性值的代碼范圍鏈中。 為了可靠地訪問您的功能（跨瀏覽器），您需要繞開作用域鏈。

可能的解決方案：

2. 使函數成為您自己的對象的方法：

    var myObject = { startDraw: function (…) { // … }, // … clear: function (…) { // … } }; … <button onclick="myObject.clear()">Clear</button> 

3. 直接訪問其功能所在的全局對象：

    var _global = this; // … function clear () { // … } … <button onclick="_global.clear()">Clear</button> 

   （您可以選擇其他任何變量標識符來代替_global ，只要它不與內置符號或主機定義的符號發生沖突即可_global是不太可能發生沖突的標識符。）

推薦使用方法1，因為它減少了用戶定義的全局符號的數量，從而減少了與內置符號和主機定義符號沖突的可能性。