zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    jmeter上传和下载、webservice、数据库连接 -- 9
    jmeter cookies和token -- 8
    java 获得 微信 UserId
    让textarea根据文本的长度自动调整它的高度
    oracle 连接数据库并查询,返回List<Map<String, Object>> 数据
    POI 4.0 读取Excel
    excel (2)
    导出 doc
    sui Mobile 试玩
    oracle 与 前台 md5
  • 原文地址:https://www.cnblogs.com/Abner5/p/5845001.html
Copyright © 2011-2022 走看看