html5——canvas画直线 

<html>
    <head>
        <title>canvas demo</title>
    </head>
    <body>
        <canvas id="mycanvas" width="500px" height="500px" ></canvas>
        <script type="text/javascript">
            var mycanvas = document.getElementById("mycanvas");
            var mycontext = mycanvas.getContext("2d"); 

            mycontext.beginPath();
            mycontext.strokeStyle = "red";
            mycontext.moveTo(70, 140);
            mycontext.lineTo(140, 70);
            mycontext.lineTo(300,200);
            mycontext.lineWidth="5";
            mycontext.stroke();

            mycontext.beginPath();
            mycontext.strokeStyle = "blue";
            mycontext.moveTo(200, 200);
            mycontext.lineTo(400, 500);
            mycontext.stroke();
        </script>
        <style>
            #mycanvas{
                border: solid 1px;
            }
        </style>
        
    </body>
</html>

效果图

beginPath()

刷新（开始）画图的开头

moveTo()

开始点

lineto()

记录点，可以多个

stroke()

绘制从beginPath()开始设置的定义图形

 

posted @ 2015-08-28 10:31  fj0716  阅读(226)  评论(0)  编辑  收藏  举报