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()
    }

  • 相关阅读:
    (0)git安装
    [SCOI2008]奖励关
    bzoj1007 [HNOI2008]水平可见直线
    【bzoj1060】[ZJOI2007]时态同步
    【bzoj2705】[SDOI2012]Longge的问题
    【bzoj3505】[Cqoi2014]数三角形
    【bzoj3747】[POI2015]Kinoman
    P1072 Hankson的趣味题
    poj1845 数论 快速幂
    【bzoj1965】[Ahoi2005]SHUFFLE 洗牌
  • 原文地址:https://www.cnblogs.com/Tachi/p/6935224.html
Copyright © 2011-2022 走看看