zoukankan      html  css  js  c++  java
  • canvas

     线(4个属性):                                          

      lineWidth:<integer>   // 宽度

      lineCap: butt | round | square  // 顶端样式  默认| 圆角 | 方角

      lineJoin: miter | round | bevel  // 相交样式  直切 | 圆角 | 倒角

      miterLimit : <integer default=10> // 当相交模式设置为 直切时有效 

    lineCap & lineJoin                     

    ctx.lineWidth = 10;
    ctx.strokeStyle = "#EEF2F0";
    ctx.shadowColor = "#78B359";
    ctx.shadowOffsetY = 10;
    (_=>{
        for(let i=0;capType=["butt","round","square"][i++];){
            ["miter","round","bevel"].forEach((e,j)=>{
                ctx.beginPath();
                ctx.lineJoin =  e;
                ctx.lineCap = capType;
                ctx.moveTo(10+i*230,300+j*150);
                ctx.lineTo(100+i*230,400+j*150);
                ctx.lineTo(200+i*230,300+j*150);
                ctx.stroke();
                ctx.closePath();
            })
        };
    })();

    miterLimit : 1-8                                                                    

    ctx.lineWidth = 10;
    ctx.strokeStyle = "#EEF2F0";
    ctx.shadowColor = "#78B359";
    for (var a = 10;a=a-1;){
        ctx.shadowOffsetY = 10;
        ctx.lineJoin = "miter";
        ctx.miterLimit = 10-a; //如果设置为0 ,则值为默认10
        console.log(ctx.miterLimit)
        ctx.beginPath()
        ctx.moveTo(10+(10-a)*100,10);
        ctx.lineTo(50+(10-a)*100,50);
        ctx.lineTo(100+(10-a)*100,10);
        ctx.stroke();
        ctx.closePath()
    }

  • 相关阅读:
    Python3开发环境及基本语法(一)
    PostMan接口测试工具
    Jmeter接口测试(三)
    Jmeter接口测试(二)
    Jmeter接口测试(一)
    Fiddler抓包工具
    HTTP协议数据结构分析
    CentOS7种搭建FTP服务器
    CentOS7 apache创建虚拟路径
    CentOS7上搭建WordPress博客
  • 原文地址:https://www.cnblogs.com/Tachi/p/6935224.html
Copyright © 2011-2022 走看看