我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。
教程介绍、教程目录等能在README里查阅。
线段介绍
Canvas中绘图环境与线段有关的属性:
属性 | 描述 | 类型 | 取值范围 | 默认值 |
---|---|---|---|---|
lineWidth | 线段宽度(以像素为单位) | double | 非零正数 | 1.0 |
lineCap | 如何绘制线段端点 | DOMString | butt、round、squaer | butt |
lineJoin | 如何绘制线段连接点 | DOMString | round、bevel、miter | bevel |
miterLimit | 斜接线的长度与二分之一线宽的比值。如果斜接线长度超过该值,则以bevel绘制线段连接点 | double | 非零正整数 | 10.0 |
线段端点
线段端点,是指线段两端的位置,也就是“线帽(line cap)”的样子。如图所示,下面是三种线帽,分别是“不加帽子”、“加个圆帽”、“加个方帽”。
在绘图环境中,控制线段端点的属性正好叫做lineCap,从上到下这三种样式分别对应“butt”、“round”、“square”。
线段连接点
绘制线段或矩形时,你可以控制两条线段连接处的那个拐弯,也就是线段连接点(line join)应该怎么画,在绘图环境中,由lineJion属性控制。
从上到下lineJoin这三种属性分别是“round”、“bevel”、“miter”。
- bevel:用一条直线连接两个拐角外部的点
- round:在bevel的基础上补充一条圆弧
- miter(默认):沿两条线外边缘延长到相交至一个角,受miterLimit属性的影响,超过该值,则以bevel属性替代
当我们为lineJoin使用miter属性的时候,我们可以指定一个miterLimit属性,它表示斜接线(miter)长度与二分之一宽度的比值,斜接线长度计量方式如图所示。