Question

由于某些starnge原因，它对我来说不起作用

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

Answer 2

<button onclick="clear()">Clear</button>
在chrome控制台中它说：＆＃34; document.clear（）已弃用。这种方法没有做任何事情。＆＃34;

您已遇到legacy scope chain augmentation problem。

在这种情况下，clear是主机定义的document属性引用的对象的属性名称，该属性位于event-handler属性中代码的作用域链中值。为了可靠地访问（跨浏览器）功能，您需要规避范围链。

可能的解决方案：

使您的函数方法成为您自己的对象：

var myObject = {
  startDraw: function (…) {
    // …
  },

  // …

  clear: function (…) {
    // …
  }
};

…

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

直接访问全局对象，其函数的方法是：
```
var _global = this;

// …

function clear ()
{
  // …
}

…

<button onclick="_global.clear()">Clear</button>
```
（您可以选择任何其他变量标识符代替_global，只要它不与内置或主机定义的符号冲突。_global是不太可能发生冲突的标识符。）< / p>

建议使用方法1，因为它减少了用户定义的全局符号的数量，因此可能与内置和主机定义的符号发生冲突。

我如何清除画布？

2 个答案: