firefox中关于用html标签canvas画图内存泄露的问题

lsg520 2007-12-20 03:03:07

求助解决　用canvas标签在页面上实现点击拖动画圆存在的内存泄露问题
具体代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<div style="width: 1000px ;height: 1000px; background-color: #ddf ;z-index: 101" >
</div>
<script language = "javascript">

//**********************************
//Vml:Circle类(圆)
//**********************************
function CircleClass(Evnt)
{
//alert();
this.obj = null ;
//创建存放画布的DIV层
this.objDiv = document.createElement("DIV") ;
this.objDiv.id = "rectDiv";
this.objDiv.style.position="absolute";
this.objDiv.style.zIndex="100";
this.objDiv.style.visibility="visible";
this.objDiv.style.left = "0px";
this.objDiv.style.top = "0px";
document.body.appendChild(this.objDiv );
//创建并初始化画布
this.canvasObj = document.createElement("canvas");
this.canvasObj.id = "boxOnMap" +Math.round(Math.random()*10000);
this.canvasObj.width = 1000;
this.canvasObj.height = 1000 ;
this.obj = this.canvasObj.getContext("2d");
this.obj.fillStyle = "blue"; //填充色
this.obj.strokeStyle = "red" //边框色
this.obj.lineWidth = 3 ;//边框宽度
this.obj.globalAlpha =0.45 ;//透明度
this.objDiv.appendChild(this.canvasObj);
//初始点击点的窗口坐标
this.Mx=parseInt(Evnt.pageX);
this.My=parseInt(Evnt.pageY);
Evnt.preventDefault();
//this.objDiv.onmousedown=m.OnMapMouseDown;
// this.objDiv.onmouseout=m.OnMapMouseOut;
// this.objDiv.ondblclick=m.OnMapDblClick;
// this.objDiv.onmouseup=m.OnMapMouseUp;
// this.objDiv.onmousemove=m.OnMapMouseMove;
//方法:设置矩形框样式
this.setStyle = function(lineColor,lineWidth,fillColor,fillOpacity){
this.obj.strokeStyle = lineColor?lineColor:"#ffa500";
this.obj.lineWidth = lineWidth?lineWidth:"1pt";
this.obj.fillStyle = fillColor?fillColor:"#119";
this.obj.globalAlpha = fillOpacity?fillOpacity:0.45;
}
//方法:绘图
this.drawing = function(Evnt){

var mx=Evnt.pageX ;
var my=Evnt.pageY;
this.obj.clearRect(0,0,1150,1150);
var radius = Math.sqrt((mx-this.Mx)*(mx-this.Mx)+(my-this.My)*(my-this.My));
this.obj.arc(this.Mx, this.My,radius,0, 2*Math.PI, true);
//this.obj.rect(this.Mx,this.My,mx-this.Mx,my-this.My);
this.obj.stroke();
this.obj.fill();
//Evnt.preventDefault();
}
//方法:清除绘图以及vml对象
this.dispose = function(){
this.obj.clearRect(0,0,1150,1150);
this.objDiv.removeChild(this.canvasObj) ;
document.body.removeChild(this.objDiv) ;
delete this.obj;
delete this.objDiv;
delete this.canvasObj ;

}
}
window.vmlObj =null ;
//vmlObj.drawing() ;
window.document.onmousedown=function(Evnt){
var e=Evnt?Evnt:event;
if(vmlObj==null)
vmlObj = new CircleClass(e) ;
}
window.document.onmousemove=function(Evnt){
var e=Evnt?Evnt:event;
if(window.vmlObj!=null)
window.vmlObj.drawing(e)
}
window.document.onmouseup=function(){
if(window.vmlObj!=null){
window.vmlObj.dispose()
window.vmlObj = null ;
}
}
</script>
</BODY>
</HTML>

...全文