canvas使用方法（canvas基础）

canvas绘制线路图

线路图；
css：

<canvas id="myCanvas" width="900px" height="400px" style="border: 1px dotted black; float: left;">  
        您的浏览器不支持canvas标签。
        
    </canvas>
<script type="text/javascript">   
    //获取Canvas对象(画布)   
    var canvas = document.getElementById("myCanvas");   
    //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   
    if(canvas.getContext){     
        //获取对应的CanvasRenderingContext2D对象(画笔)   
        var ctx = canvas.getContext("2d");     
           
        //开始一个新的绘制路径   
        ctx.beginPath();   
        //设置线条颜色为蓝色   
        ctx.strokeStyle = "black";   
        ctx.setLineDash([2]);
        //设置路径起点坐标   
        ctx.moveTo(123, 118);   
        //定义中间点坐标1   
        ctx.lineTo(300, 253);   
        //定义中间点坐标2   
        ctx.lineTo(730, 185);   
        //定义中间点坐标3(这是最后一个中间点，也就是终点)
        //按照绘制路径顺序连接各个坐标点   
        ctx.stroke();   
        //关闭绘制路径   
        ctx.closePath();   
    }   
    </script>