Raphael.js，清除画布的问题答案

【问题标题】：Raphael.js, problem with clear the canvasRaphael.js，清除画布的问题
【发布时间】：2011-08-10 06:09:44
【问题描述】：

myraphael.js：

var raphael_test=function(){
  var canvas = Raphael("my-canvas", width, height);  

  return {
     startToDraw: function(){
        //canvas.clear() //Error happend when mouse click more than once
        canvas.rect(10, 10, 50, 50);
     }
  };
}();

draw.js：

var btn=$('#btn');

btn.click(function(){

  raphael_test.startToDraw();
});

index.html:

<body>
    <div id="my-canvas"></div>
    <input type="button" id="btn"></input>

    <script src="raphael-min.js"></script>
    <script src="myraphael.js"></script>
    <script src="draw.js"></script>
</body>

每次点击按钮时，我想先清除上一次绘制，然后再绘制矩形。

我在 myraphael.js 中实现了 canvas.rect(10, 10, 50, 50); 之前的 clear 部分。但是当鼠标多次点击按钮时，我从萤火虫那里得到错误：

raphael-min.js 是从 raphael 官方页面下载的 Raphael 库。

我不明白这个错误，也不知道如何摆脱它......

【问题讨论】：

标签： javascript raphael javascript-framework

【解决方案1】：

cavas != 纸。这是一个命名问题。

var width = 200;
var height = 200;

var raphael_test = (function() {

  var canvas = Raphael("my-canvas", width, height);  

  return {
     startToDraw: function() {
       canvas.clear(); 
       canvas.rect(10, 10, 50, 50);
     }
  };
})();

顺便说一句：请确保所有 dom-objects 都正确加载并且你的 js 被包裹了..

$(document).ready(function() {
 ...
});

【讨论】：

您好，这不是命名问题，只是我的错字。我的代码使用画布。即使我没有错字，问题仍然存在。
你检查过id为“my-canvas”的dom对象是否可用？你可以写 console.log($("#my-canvas"));在 raphael_test 的第一行。
梅隆，我让你的代码运行没有任何问题。 jsbin.com/avera4/2/edit（希望有帮助）

【解决方案2】：

canvas.clear() 是正确的，但它只能在myraphael.js 中访问。所以，给它添加一个clear 函数：

var raphael_test=function(){
  var canvas = Raphael("my-canvas", width, height);  

  return {
     clear: function () {
        canvas.clear();
     },
     startToDraw: function () {
        canvas.rect(10, 10, 50, 50);
     }
  };
}();

【讨论】：

@Mellon，真的需要看看你更新的代码。此外，您还有一个额外的逗号：<input type="button", id="btn"></input>。
代码和错误信息现在在我的帖子中更新。第一次点击按钮没有错误，多次点击按钮就会发生错误。