zoukankan      html  css  js  c++  java
  • HTML5 canvas 中的线条样式

    线条样式属性
    lineCap        设置或返回线条的结束端点样式
    butt         默认。向线条的每个末端添加平直的边缘。
    round         向线条的每个末端添加圆形线帽。
    square         向线条的每个末端添加正方形线帽。

    lineJoin        设置或返回两条线相交时,所创建的拐角类型
    bevel         创建斜角。
    round         创建圆角。
    miter         默认。创建尖角。

    lineWidth        设置或返回当前的线条宽度
    number         当前线条的宽度,以像素计

    miterLimit        设置或返回最大斜接长度
    number         正数。规定最大斜接长度。
                       如果斜接长度超过 miterLimit 的值,边角会以 lineJoin 的 "bevel" 类型来显示。

        <canvas id="c" width="500" height="450" style="border:1px solid #000"></canvas>
        <script type="text/javascript">
        var a=document.getElementById("c");
        var ctx=a.getContext("2d");
        ctx.beginPath();                //起始一条路径,或重置当前路径
        ctx.moveTo(20,20);                //把路径移动到画布中的指定点,不创建线条
        ctx.lineTo(200,20);                //添加一个新点,然后在画布中创建从该点到最后指定点的线条
        ctx.lineWidth=5;                //设置或返回当前的线条宽度
        ctx.lineCap="round";        //向线条的每个末端添加圆形线帽。
        ctx.strokeStyle="green";
        ctx.stroke();
    
        ctx.beginPath();
        ctx.moveTo(20,40);
        ctx.lineTo(200,40);
        ctx.lineWidth=5;                //设置或返回当前的线条宽度
        ctx.lineCap="butt";                //默认。向线条的每个末端添加平直的边缘。
        ctx.strokeStyle="blue";
        ctx.stroke();
    
        ctx.beginPath();
        ctx.moveTo(20,60);
        ctx.lineTo(200,60);
        ctx.lineWidth=5;                        //设置或返回当前的线条宽度
        ctx.lineCap="square";                //向线条的每个末端添加正方形线帽。
        ctx.strokeStyle="yellow";
        ctx.stroke();
    
        ctx.beginPath();
        ctx.lineJoin="round";        //设置或返回两条线相交时,所创建的拐角类型
        ctx.moveTo(20,80);
        ctx.lineTo(50,100);
        ctx.lineTo(20,120);
        ctx.lineWidth=20;
        ctx.strokeStyle="red";
        ctx.stroke();
    
        ctx.beginPath();
        ctx.lineJoin="bevel";
        ctx.moveTo(120,80);
        ctx.lineTo(150,100);
        ctx.lineTo(120,120);
        ctx.lineWidth=20;
        ctx.strokeStyle="red";
        ctx.stroke();
    
        ctx.beginPath();
        ctx.lineJoin="miter";
        ctx.moveTo(220,80);
        ctx.lineTo(250,100);
        ctx.lineTo(220,120);
        ctx.lineWidth=20;
        ctx.strokeStyle="red";
        ctx.stroke();
    
        ctx.beginPath();
        ctx.lineWidth=10;
        ctx.lineJoin="miter";
        ctx.miterLimit=5;        //设置或返回最大斜接长度,斜接长度指的是在两条线交汇处内角和外角之间的距离
        ctx.moveTo(20,150);
        ctx.lineTo(50,157);
        ctx.lineTo(20,164);
        ctx.stroke();
        </script>
    

     

  • 相关阅读:
    读保哥《ASP.NET MVC2开发实战》第三回(Controller1)
    MVC Model之简单数据问题
    读保哥《ASP.NET MVC2开发实战》第三回(Controller2)
    [导入]我的google十年散乱的记忆(转载)
    [导入]从飞信到SNS,中国移动进军互联网之路,悬乎
    [导入]预览google chrome新功能
    [导入]百度曲线杀入视频分享领域
    [导入]TMobile官方正式宣布将在9月23日举行android新闻发布会
    [导入]Google手机水货下个月开卖 零售价格4000元
    [导入]祝大家中秋节快乐
  • 原文地址:https://www.cnblogs.com/ricesm/p/5066988.html
Copyright © 2011-2022 走看看