js畫直線

IE下畫線

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <style type="text/css">   
    v\:* {      behavior:url(#default#VML);    }   
    </style>
</head>
<body>
<v:line
from='200,200'
to='300,100'
style='position:absolute;z-index:8'>
</v:line>
</body>
</html>

<script>
var R =function(){};
R.prototype.createLine = function (startX,startY,endX,endY){
    var le = document.createElement( " <v:line> <v:line>" );
    le.from = startX + ',' + startY ;
    le.to = endX + ',' + endY ;
    le.strokecolor= "red" ;
    le.strokeweight= "1pt" ;
    return le;
}
var d =new R();
document.body.appendChild(d.createLine(1,1,200,100));
</script>

FF下畫線

<html>
  <head>
    <title>A canvas fillRect, strokeRect and clearRect example </title>
    <meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/">
    <meta name="DC.publisher" content="Mozilla Developer Center, http://developer.mozilla.org">
    <script type="text/javascript">
      function drawShape(){
        // get the canvas element using the DOM
        var canvas = document.getElementById('tutorial');

        // Make sure we don't execute when canvas isn't supported

        if (canvas.getContext){

          // use getContext to use the canvas for drawing
          var ctx = canvas.getContext('2d');

          // Draw shapes
          ctx.fillRect(25,25,100,100);
          ctx.clearRect(45,45,60,60);
          ctx.strokeRect(50,50,50,50);

          ctx.beginPath();
          ctx.moveTo(100,100);
          ctx.lineTo(200,250);
          ctx.lineTo(50,250);
          ctx.closePath();
          ctx.stroke();

        } else {
          alert('You need Safari or Firefox 1.5+ to see this demo.');
        }
      }
    </script>
    <style type="text/css">
    </style>
  </head>

  <body onload="drawShape();">
    <div>
      <canvas id="tutorial" width="400" height="400"> </canvas>
    </div>
  </body>

</html>

摘自CSDN論壇，沒有測試，不保證內容的正確性和可用性。