HTML5之canvas 3 绘制直线

Context.moveTo(20,20);

Context.lineTo(20,200);

Context.lineWidth=10;　　

Context.lineCap=”round”;

Context.lineJoin=”round”;

Context.stroke();

Context.setLineDash([5,15])

<html>

    <head>
        <meta charset="UTF-8">
        <title>横线-竖线-斜线</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>
        <canvas id="canvas" width="500" height="500"></canvas>

        <script type="text/javascript">
            var oCanvas = document.getElementById("canvas");
            var context = oCanvas.getContext("2d");
            context.fillStyle = "#ededed";
            context.fillRect(0, 0, 500, 500);
            //一直线

            //1画线
            context.moveTo(400,20);//移端点
            context.lineTo(400,200);//画线
            context.strokeStyle = "red";//线的颜色
            //stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
            context.stroke();//画框
            
            //竖线
            context.moveTo(20,20);//移端点
            context.lineTo(20,200);//画线
            context.lineWidth = 4;//线宽度
            context.lineCap = "round";//帽
            context.strokeStyle = "red";//线的颜色
            context.stroke();//画框
            //横线
            context.moveTo(20,200);//移端点
            context.lineTo(200,200);
            context.stroke();
            //斜线
            context.moveTo(20,200);//移端点
            context.lineTo(200,20);
            context.setLineDash([10,15]);//(1参)10虚线长度；(2)15这根线和下个线的距离;
            context.stroke();
            
        </script>
    </body>

</html>

 

posted @ 2016-09-06 11:14  李大白程序员  阅读(659)  评论(0)  编辑  收藏  举报