你的位置:首页 > 软件开发 > 网页设计 > HTML5中lineCap端点样式遇到closePath()

HTML5中lineCap端点样式遇到closePath()

发布时间:2015-05-09 16:00:19
定义和用法lineCap 属性设置或返回线条末端线帽的样式。注释:"round" 和 "square" 会使线条略微变长。默认值:buttJavaScript 语法:context.lineCap="butt|round|squa ...

HTML5中lineCap端点样式遇到closePath()

 

定义和用法

lineCap 属性设置或返回线条末端线帽的样式。

注释:"round" 和 "square" 会使线条略微变长。

默认值:butt
JavaScript 语法:context.lineCap="butt|round|square";

属性值

描述
butt默认。向线条的每个末端添加平直的边缘。
round向线条的每个末端添加圆形线帽。
square向线条的每个末端添加正方形线帽。

例子

    var c = document.getElementById('myCanvas');    var ctx = c.getContext("2d");//获取上下文2d环境    var lineCap = ["butt","round","square"];    ctx.strokeStyle = "red";    ctx.beginPath();    ctx.moveTo(10,10);    ctx.lineTo(10,150);    ctx.moveTo(150,10);    ctx.lineTo(150,150);    ctx.stroke();    ctx.closePath();    for (var i = 0; i < lineCap.length; i++) {      ctx.strokeStyle = "blue";      ctx.lineWidth = 20;      ctx.lineCap = lineCap[i];      ctx.beginPath();      ctx.moveTo(10,30*i+20);      ctx.lineTo(150,30*i+20);       ctx.stroke();      ctx.closePath();//此处两行不能颠倒位置,如果先闭合路径再绘制就不会有端点样式    };

原标题:HTML5中lineCap端点样式遇到closePath()

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。