网页绘图???

在网页在可不可以绘图呢??  画线就OK了.  
 
如果有,怎么做呢??  谢谢解答呀!  
 
今晚小弟请客.

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>paint</TITLE>
    <style>
    .emuW{position:absolute;font-size:2px;width:2;background-color:red}
    .emuH{position:absolute;font-size:2px;height:2;background-color:red}
    .emuWH{position:absolute;font-size:2px;width:2;height:2;background-color:red}
    </style><SCRIPT LANGUAGE="JavaScript" defer>
    <!--
    var blnStartFlag;
    blnStartFlag = false;
    var intCount;
    var intMouseMoveCount;
    intCount = 1;
    intMouseMoveCount = 1; function fnSwitchMode(){
    if(blnStartFlag == false && window.event.srcElement.type != "button"){
    blnStartFlag = true;
    }
    else{
    blnStartFlag = false;
    oldX=oldY=0;
    }
    } function fnPaint(){
    if(blnStartFlag == true){
    intCount = intCount + 1;
    var stElm = drawLine(oldX==0?event.x:oldX,oldY==0?event.y:oldY,event.x,event.y,"red");
    oldX = event.x;oldY = event.y;draw(stElm);
    }
    intMouseMoveCount = intMouseMoveCount + 1;
    div1.innerHTML = "MouseMoveCount:" + intMouseMoveCount
    + "<br> PaintCount:" + intCount
    + "<br>LeftPos:" + window.event.x 
    + "<br> TopPos:" + window.event.y;
    }
    function draw(html){
    if (emu == null || emu.children.length>maxChildren){
    emu = document.createElement("<div>");
    setTimeout("document.body.insertBefore(emu)",50);
    }
    setTimeout("emu.innerHTML+=\""+html+"\"",1)
    }
    function fnShowCount(){
    alert(intCount);
    }
    //-->
    </SCRIPT><SCRIPT LANGUAGE="JavaScript">
    <!--
    var emu = null;
    var maxChildren = 50;
    var oldX = 0;
    var oldY = 0;
    function drawLine(x0,y0,x1,y1,color){
    x0 = Math.round(x0);
    x1 = Math.round(x1);
    y0 = Math.round(y0);
    y1 = Math.round(y1);
    var rs = "";
    if (y0 == y1){  //画横?
    if (x0>x1){var t=x0;x0=x1;x1=t}  
    rs = "<p class=emuH style='top:"+y0+";left:"+x0+";background-color:"+color+"; width:"+Math.abs(x1-x0)+"'/>";
    }
    else if (x0 == x1){  //画??
    if (y0>y1){var t=y0;y0=y1;y1=t} 
    rs = "<p class=emuW style='top:"+y0+";left:"+x0+";background-color:"+color+";height:"+Math.abs(y1-y0)+"'/>";
    }
    else{
    var lx = x1-x0;
    var ly = y1-y0;
    if (Math.abs(lx)>Math.abs(ly)){
    if (ly<0){
    var t=x0;x0=x1;x1=t;
    t=y0;y0=y1;y1=t;
    lx = -lx;
    ly = -ly;
    }
    var dx = lx/ly;
    rs = new Array(ly);
    for (var i=0;i<ly;i++){
    var left,width;
    if (dx>0){
    left = Math.round(i*dx);
    width = Math.round((i+1)*dx)-left;
    left += x0;
    if (width+left>x1) width = x1-left;
    }else{
    left = Math.round((i+1)*dx);
    width = Math.round((i)*dx)-left;
    left += x0;
    if (left<x1) {
    width = width+left-x1;
    left=x1;
    }
    }
    rs[i] = "<p class=emuH style='top:"+(y0+i)+";left:"+left+";width:"+width+";background-color:"+color+"'/>";
    }
    }else{
    if (lx<0){
    var t=x0;x0=x1;x1=t;
    t=y0;y0=y1;y1=t;
    lx = -lx;
    ly = -ly;
    }
    var dy = ly/lx;
    rs = new Array(lx);
    for (var i=0;i<lx;i++){
    var top,height;
    if (dy>0){
    top = Math.round(i*dy);
    height = Math.round((i+1)*dy)-top;
    top += y0;
    if (height+top>y1) height = y1-top;
    }else{
    top = Math.round((i+1)*dy);
    height = Math.round((i)*dy)-top;
    top += y0;
    if (top<y1) {
    height = height+top-y1;
    top=y1;
    }
    }
    rs[i] = "<p class=emuW style='top:"+top+";left:"+(x0+i)+";height:"+height+";background-color:"+color+"'/>";
    }
    }
    rs = rs.join("");
    }
    return rs
    }//-->
    </SCRIPT>
    </HEAD><BODY onclick="fnSwitchMode()" onmousemove="fnPaint()">
    <input type="button" onclick="fnShowCount()" value="ShowCount">
    <div id="div1"></div>
    </BODY>
    </HTML>
      

  2.   

    谢谢楼上的.我终于知道网页是可以写字的.