Raphael.js，清除画布的问题
Posted
技术标签:
【中文标题】Raphael.js，清除画布的问题【英文标题】：Raphael.js, problem with clear the canvas 【发布时间】：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 库。
我不明白这个错误，也不知道如何摆脱它......
【问题讨论】：
【参考方案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>。
代码和错误信息现在在我的帖子中更新。第一次点击按钮没有错误，多次点击按钮就会发生错误。以上是关于Raphael.js，清除画布的问题的主要内容，如果未能解决你的问题，请参考以下文章