canvas中线段的端点与连贯点详解--百分百源码网

canvas中线段的端点与连贯点详解-

发布时间：08/01 来源：未知浏览：关键词：

我们在第三节中描述了线段的绘制，其中线段的属性lineWidth是用来转变线段的宽度。让我们来回顾下线宽的用途functiondrawLine(){cxt.lineWidth3;cxt.moveTo(10,10);cxt.lineTo(120,100);cxt.stroke();}上面的代码我们就可以绘制一条宽度为3像素的线段。上一章在Canvas中，线段也是途径中的一种，被称之为线性途径。在Canvas中绘制线性途径主要用到moveTo(x,y)、lineTo(x,y)和stroke()几个办法，让我们来回顾下线宽的用途。

function drawLine(){
    cxt.lineWidth = 3;
    cxt.moveTo(10, 10);
    cxt.lineTo(120, 100);
    cxt.stroke();
}

上面的代码我们就可以绘制一条宽度为3像素的线段。

上一章我们还提到线宽与像素边界的内容主要为：
要是你在某2个像素的边界处绘制一条1像素宽的线段，那么该线段现实会占领2个像素的宽度；

由于当你在像素边界处绘制一条1像素宽度的垂直线段时，canvas的画图环境对象会试着将半个像素画在边界中线的右侧，将别的半个像素画在边界中线的左边。

然而，在一个整像素的范畴内绘制半个像素宽的线段是不成能的，所以在摆布两个标的目的上的半个像素都被扩展为1个像素。（概括内容可参照第三章内容）；

今天这章内容我们用来看看线段的其它属性 lineCap，lineJoin。

线段的端点（lineCap）

在绘制线段时，你可以控制线段的端点，也就是 “线帽” （lineCap）的模样，在Canvas的画图环境对象中，控制线段端点的属性正好也叫作lineCap。
线段端点的样式有三个值，离别是butt, roundm, square，默许是为butt； round与square 都会给线段的端点画上一顶帽子。

butt：线段端点的默许样式
round：在端点处增加一个半圆，其半径是线宽的一半。
square: 在端点处增加一个矩形，长度与线宽一致，宽度是线宽的一半。

看到这里貌似我们也看不出什么名堂。那我们就先绘制出来，你就会眨眼明确了。要不怎么都说要数据可视化呢！

function lineCap(){
    cxt.lineWidth = 20;
    cxt.strokeStyle = '#16a085';

    cxt.beginPath();
    cxt.lineCap = 'butt';
    cxt.moveTo(20, 20);
    cxt.lineTo(300, 20);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineCap = 'round';
    cxt.moveTo(20, 100);
    cxt.lineTo(300, 100);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineCap = 'square';
    cxt.moveTo(20, 180);
    cxt.lineTo(300, 180);
    cxt.stroke();
}

lineJoin属性也有三个值离别为： round, bevel, miter，默许是miter。

round：额外添补一个圆弧，圆弧为两条线段拐角的外边沿的点用圆弧连贯而成，
bevel：额外添补一个三角形，三角形为两条线段拐角的外边沿的点用直线连贯而成。
miter：额外添补一个多边形，多边形为两条线段拐角外边沿的延伸线的交点构成。

一样我们绘制出来看一下

function lineCap(){
    cxt.lineWidth = 20;
    cxt.strokeStyle = '#16a085';

    cxt.beginPath();
    cxt.lineJoin = 'round';
    cxt.moveTo(20, 20);
    cxt.lineTo(300, 20);
    cxt.lineTo(300, 60);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineJoin = 'bevel';
    cxt.moveTo(20, 100);
    cxt.lineTo(300, 100);
    cxt.lineTo(300, 140);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineJoin = 'miter';
    cxt.moveTo(20, 180);
    cxt.lineTo(300, 180);
    cxt.lineTo(300, 220);
    cxt.stroke();
}

从图中我们可以看出，要是两个线段的夹角很小的话，那么歪接线的长度有可能会变的非常长，它与二分之一线宽的比值就会超出你所指定的miterLimit的属性值，

这时候阅读器会将以bevel的方式来绘制线段的连贯点。

总结

Canvas画图环境中线段的相干属性

属性	描述	值	默许值
lineWidth	以像素为单位的线段宽度	非零的正数	1
lineCap	绘制线段的端点样式	butt，round，square	butt
lineJoin	线段连贯点的样式	bevel，round，miter	miter
miterLimit	歪接线与二分之一线宽的比值	非零的正数	10