Question

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); 之前实施清除部分。但是当鼠标不止一次点击按钮时，我从firebug得到错误：

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

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

Answer 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);
     }
  };
})();

btw：请确保所有dom-object都正确加载并且你的js被包裹着..

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

Answer 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);
     }
  };
}();

Raphael.js，清除画布的问题

2 个答案: