• 2006-12-19

    动态绘圆、矩形、单线、折线、多边形的js代码(ff) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/4089997.html

    <s c r i p t>
    start=true;
    startx=0;
    starty=0;
    points=new Array();
    function mynew()
    {
    if(document.all)return;
    mydblclick();
    document.getElementById("mydraw").innerHTML="";
    mycanvas=document.createElement("canvas");
    mycanvas.width=document.body.clientWidth-20;
    mycanvas.height=document.body.clientHeight-40;
    mycanvas.id="mygraph";
    mycanvas.onclick=myclick;
    mycanvas.ondblclick=mydblclick;
    mycanvas.onmousemove=mymove;
    document.getElementById("mydraw").appendChild(mycanvas);
    }
    function mychange(e)
    {
    mycanvas=document.getElementById("mygraph");
    ctx=mycanvas.getContext("2d");
    ctx.clearRect(0,0,mycanvas.width,mycanvas.height);
    ctx.strokeStyle="red";
    ctx.fillStyle="lightgreen";
    ctx.beginPath();
    if(document.getElementsByName("myradio")[0].checked)
    {
    myradius=Math.sqrt((e.clientX-startx)*(e.clientX-startx)+(e.clientY-starty)*(e.clientY-starty));
    ctx.arc(startx,starty,myradius,0,7,false);
    }
    else if(document.getElementsByName("myradio")[1].checked)
    {
    if(e.clientX-startx<0)
    {
    currentx=e.clientX;
    mywidth=startx-e.clientX;
    }
    else
    {
    currentx=startx;
    mywidth=e.clientX-startx;
    }
    if(e.clientY-starty<0)
    {
    currenty=e.clientY;
    myheight=starty-e.clientY;
    }
    else
    {
    currenty=starty;
    myheight=e.clientY-starty;
    }
    ctx.strokeRect(currentx,currenty,mywidth,myheight);
    }
    else
    {
    ctx.moveTo(startx,starty);
    if(document.getElementsByName("myradio")[2].checked)
    ctx.lineTo(e.clientX,e.clientY);
    else
    {
    for(i=0;i<points.length;i++)
    ctx.lineTo(points[i],points[++i]);
    ctx.lineTo(e.clientX,e.clientY);
    if(document.getElementsByName("myradio")[4].checked)
    {
    ctx.closePath();
    ctx.fill();
    }
    }
    }
    ctx.stroke();
    }
    function myclick(e)
    {
    if(start)
    {
    mynew();
    startx=e.clientX;
    starty=e.clientY;
    start=!start;
    }
    else
    {
    points.push(e.clientX);
    points.push(e.clientY);
    mychange(e);
    if(document.getElementsByName("myradio")[0].checked||document.getElementsByName("myradio")[1].checked||document.getElementsByName("myradio")[2].checked)
    mydblclick();
    }
    }
    function mydblclick()
    {
    start=true;
    points.length=0;
    }
    function mymove(e)
    {
    if(start)return;
    if(document.getElementById("mygraph")==null)return;
    mychange(e);
    }
    </ s c r i p t>
    <div id=mydraw></div>
    <input type=radio name=myradio value=circle o n c h a n g e=mynew()>circle&nbsp;<input type=radio name=myradio value=rect o n c h a n g e=mynew()>rect&nbsp;<input type=radio name=myradio value=line o n c h a n g e=mynew()>line&nbsp;<input type=radio name=myradio value=polyline o n c h a n g e=mynew()>polyline&nbsp;<input type=radio name=myradio value=polygon o n c h a n g e=mynew()>polygon

    分享到: