码迷,mamicode.com
首页 > 其他好文 > 详细

canvas - 线

时间:2017-06-02 23:06:39      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:++   microsoft   ext   mic   eve   lin   alt   code   src   

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

技术分享

canvas - 线

标签:++   microsoft   ext   mic   eve   lin   alt   code   src   

原文地址:http://www.cnblogs.com/Tachi/p/6935224.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!