【【高分求--Firefox中动态创建canvas画线？？？】】

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

LZ可能粗心了，呵呵
<script>
window.onload = function() {
  FFLine2(0,0,100,100)
};
function FFLine2(x1,y1,x2,y2){//firefox画线
    var cvsObj=document.createElement("canvas");
document.body.appendChild(cvsObj);
    var cvs=cvsObj.getContext("2d");

    cvsObj.style.position="absolute";
    cvsObj.style.visibility="visible";

    cvs.width=100;
    cvs.height=100;
    cvs.strokeStyle='red';
    cvs.lineWidth=1;
    cvs.beginPath();
    cvs.moveTo(0,0);
        cvs.lineTo(100,100);
        cvs.closePath();
        cvs.stroke();
}
</script>
继续发问----------
怎样才能获取到html中两个点的位置，然后画线？？？
另外，document.getElementById("aa").appendChild(cvsObj);比如我在id='aa'的div处创建画板
那则这100*100的画布位于aa的右下方，那我想从aa画线到右下方以外的方向怎么办？？？总之，我的html页面有表格table，在这个表格的各列上有div标示的点，我想在这些点间画线请高手帮帮忙！！！
补充：
现在我IE中可以画，其调用方式如：
<td><div id="point08"></div><SCRIPT>DrawLine(document.getElementById("point08"),document.getElementById("point07"));</SCRIPT></td>
这样就在07和08两个位置间画线
在FF下可以这么做，获取2个点之间的相对位置
比如A(100,200),B(300,300)
那么B相对A的位置(200,100)
A.appendChild(cvsObj);
...
cvs.beginPath();
cvs.moveTo(0,0);
cvs.lineTo(200,100);
cvs.closePath();
...
我的布局方式类似于，比如有个10行10列的表格
每一行有一个div标示的点，共十个点，要求这10个点依次画线连接
行高列高固定，这个点间应该都是相对距离吧 ----------怎么弄？？？
比如我在id='aa'的div处创建画板
那则这100*100的画布位于aa的右下方，那我想从aa画线到右下方以外的方向怎么办？？？
获取某控件位置获取任意2点的位置，然后算出相对位置PS：如果是等宽等高的表格，DIV的大小、对齐方式又相同，这些DIV的相对位置应该很有规律
比如，横向相邻2个DIV的的相对位置应该是(列宽,0)
纵向2相邻个DIV的相对位置应该是(0,行高)
比如我在id='aa'的div处创建画板
那则这100*100的画布位于aa的右下方，那我想从aa画线到右下方以外的方向怎么办？？？我试过了，好像只能从（0，0）到（100，100）之间，不能是负值，这样以来就只能从aa位置画线到
它的右下方向，而不能画线到它的左下方，左上方，右上方等位置何解》》》？
做了几个例子<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title></head><body>
<script>
window.onload = function() {
  FFLine2(0,0,100,100)
};
function FFLine2(x1,y1,x2,y2){//firefox画线     var cvsObj=document.createElement("canvas");
document.getElementById("d").appendChild(cvsObj);
    var cvs=cvsObj.getContext("2d");

    cvsObj.style.position="absolute";
    cvsObj.style.visibility="visible";

    cvsObj.width=400;
    cvsObj.height=400;
    cvs.strokeStyle='red';
    cvs.lineWidth=1;
    cvs.beginPath();
    cvs.moveTo(0,0);
        cvs.lineTo(100,0);
        cvs.lineTo(100,100);
        cvs.lineTo(0,100);
        cvs.closePath();
        cvs.stroke();        cvs.beginPath();
     cvs.moveTo(100,0);
        cvs.lineTo(0,100);
        cvs.closePath();
        cvs.stroke();

        cvs.beginPath();
     cvs.moveTo(0,0);
        cvs.lineTo(100,100);
        cvs.closePath();
        cvs.stroke();


}
</script><div id=d style="position:absolute;top:0px;left:0px;width:5px;height:5px;background-color:#cccccc"></div>
<div id=d1 style="position:absolute;top:100px;left:100px;width:5px;height:5px;background-color:#cccccc"></div>
<div id=d2 style="position:absolute;top:100px;left:0px;width:5px;height:5px;background-color:#cccccc"></div>
<div id=d3 style="position:absolute;top:0px;left:100px;width:5px;height:5px;background-color:#cccccc"></div>
</body></html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title></head><body>
<script>
window.onload = function() {
  FFLine2(0,0,100,100)
};
function FFLine2(x1,y1,x2,y2){//firefox画线     var cvsObj=document.createElement("canvas");
document.getElementById("d").appendChild(cvsObj);
    var cvs=cvsObj.getContext("2d");

    cvsObj.style.position="absolute";
    cvsObj.style.visibility="visible";

    cvsObj.width=400;
    cvsObj.height=400;
    cvs.strokeStyle='red';
    cvs.lineWidth=1;
    //cvs.beginPath();
    //cvs.moveTo(0,0);
        //cvs.lineTo(100,0);
        //cvs.lineTo(100,100);
        //cvs.lineTo(0,100);
        //cvs.closePath();
        //cvs.stroke();
    cvs.strokeRect(0,0,100,100);        cvs.beginPath();
     cvs.moveTo(100,0);
        cvs.lineTo(0,100);
        cvs.closePath();
        cvs.stroke();

        cvs.beginPath();
     cvs.moveTo(0,0);
        cvs.lineTo(100,100);
        cvs.closePath();
        cvs.stroke();


}
</script><div id=d style="position:absolute;top:0px;left:0px;width:5px;height:5px;background-color:#cccccc"></div>
<div id=d1 style="position:absolute;top:100px;left:100px;width:5px;height:5px;background-color:#cccccc"></div>
<div id=d2 style="position:absolute;top:100px;left:0px;width:5px;height:5px;background-color:#cccccc"></div>
<div id=d3 style="position:absolute;top:0px;left:100px;width:5px;height:5px;background-color:#cccccc"></div>
</body></html>
将canvas置于最左上方，不就不存在负坐标了嘛
lihui_shine
谢谢你，我先看看
现在已经实现了画线功能，是从A到B，B到C，C到D这样依次连线下去的我有个新的问题，比如说我有个check按钮，但选中时就画线，未选中则不显示画线默认情况下是有画线的，这样当页面首次载入时进行一次画线，而以后点击check按钮只是显示与隐藏画线，而不是每次当选中的时候都进行重新画线，应该能办到吧？ps：我搜到使用canvas.clearRect(*,*,*,*)这个好像是全部清空了吧
请问怎么隐藏与显示（二次显示时不必重画）？？？
另外，我var cvsObj=document.createElement("canvas");
创建了一个新的cvs，我怎么才能给这个cvs指定一个id呢，因为假使我想在其他地方捕获这个
cvs，必须通过ID才能获得它吧？？？