zoukankan      html  css  js  c++  java
  • Canvas lineJoin 属性【每日一段代码20】

    <!DOCTYPE HMTL>
    <html>
    <head>
    <title>lineJoin</title>
    <script type="text/javascript">
    function draw() {
    var cxt = document.getElementById("myCanvas").getContext("2d");
    var lineJoin = ['round','bevel','miter'];
    cxt.lineWidth = 10;
    cxt.strokeStyle="#F00";
    for (i=0; i<lineJoin.length; i++){
    cxt.lineJoin = lineJoin[i];
    cxt.beginPath();
    cxt.moveTo(-5,5+i*40);
    cxt.lineTo(35,45+i*40);
    cxt.lineTo(75,5+i*40);
    cxt.lineTo(115,45+i*40);
    cxt.lineTo(155,5+i*40);
    cxt.stroke();
    }
    }
    </script>
    </head>
    <body onLoad="draw()">
    <canvas id="myCanvas" height="150" width="150";"></canvas>
    </body>
    </html>

    显示效果如下:

    lineJoin 的属性值决定了图形中两线段连接处所显示的样子。它可以是这三种之一:round, bevel 和 miter。默认是 miter。同样,绘制三条折线做例子,分别设置不同的 lineJoin 值。最上面一条是 round 的效果,边角处被磨圆了,圆的半径等于线宽一半。中间和最下面一条分别是 bevel 和 miter 的效果。当值是 miter 的时候,线段会在连接处外侧延伸直至交于一点,延伸效果受 miterLimit 属性的制约。】

  • 相关阅读:
    Distributed
    Archi
    SpringCloud
    Java 多线程
    Java 基础
    Java 基础
    Java 基础
    Java 基础
    python--all与any
    pandas--apply/applymap/map
  • 原文地址:https://www.cnblogs.com/naokr/p/2355653.html
Copyright © 2011-2022 走看看