线条属性概述
这条线有四个属性。
1、线帽的属性
线帽界定线端点的上下文中，可以有以下3个价值观。

默认情况下，端点是垂直于直线边缘的直边。
圆：终点是线边线宽的半圆。
正方形：端点的宽度为直线，从边缘到矩形宽度的半宽度。

2、线连接属性
线连接定义一个角由两根交叉的线，它可以被称为一个连接。建立在连接填充的三角形，你可以用线连接设置其基本性质。

人字：默认情况下，在连接边缘延伸的连接，miterlimit由角的长度和宽度允许的最大比例（默认为10）。
贝弗尔：连接处是对角。
圆：连接是一个圆。

三.线的宽度
线宽定义线条的宽度（默认值是1）。


4。写作风格
strokeStyle定义的颜色和风格的线条和形状的边界。
下面的两个已经说过了，下面我们来看看前两个属性。
线帽线帽

不要说太多的废话，直接在代码上看到效果。


Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。






线帽




你的浏览器不支持画布让我们换一个！




在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；

context.linewidth = 50；
context.strokestyle =# 1baaaa ；

Context.beginPath（）；
Context.moveTo（100100）；
Context.lineTo（700100）；
context.linecap =对接；
context.stroke（）；

Context.beginPath（）；
Context.moveTo（100300）；
Context.lineTo（700300）；
context.linecap =圆；
context.stroke（）；

Context.beginPath（）；
Context.moveTo（100500）；
Context.lineTo（700500）；
context.linecap =广场；
context.stroke（）；

下面两个基线图便于观察
context.linewidth = 3；
context.strokestyle =黑；

Context.beginPath（）；
Context.moveTo（100,0）；
Context.lineTo（100600）；
Context.moveTo（700,0）；
Context.lineTo（700600）；
context.stroke（）；
}








运行结果：


在这里我也做了两平行线做参考，所以，一眼能看到的线帽三值的特点。但请注意，这顶帽子在终点的作品，即使它打破了许多点，只需要这顶帽子的两端，如果你想改变线断点的风格（两线之间的连接），下面用线连接属性。
线连接线连接

不说太多的废话，直接在代码中看到的效果。本代码是由4-3，只是设置连接的属性。


Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。






线连接




你的浏览器不支持画布让我们换一个！




在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；

Context.beginPath（）；
Context.moveTo（100100）；
Context.lineTo（300300）；
Context.lineTo（100500）；
context.linejoin =人字；
context.linewidth = 20；
context.strokestyle =红色；
context.stroke（）；

Context.beginPath（）；
Context.moveTo（300100）；
Context.lineTo（500300）；
Context.lineTo（300500）；
context.linejoin =伞；
context.linewidth = 20；
context.strokestyle =蓝色；
context.stroke（）；

Context.beginPath（）；
Context.moveTo（500100）；
Context.lineTo（700300）；
Context.lineTo（500500）；
context.linejoin =圆；
context.linewidth = 20；
context.strokestyle =黑；
context.stroke（）；
}







运行结果：


隐形儿童鞋本身放大了网页或扩大了代码的线宽。
这是一个隐藏的属性，即，当线连接设置为人字（默认），结果被解锁，并miterlimit属性可用于。
例如，让我们看看它。


Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。






miterlimit




你的浏览器不支持画布让我们换一个！




在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；

Context.beginPath（）；
Context.moveTo（100100）；
Context.lineTo（300300）；
Context.lineTo（100500）；
context.linejoin =人字；
context.miterlimit = 10；
context.linewidth = 5；
context.strokestyle =红色；
context.stroke（）；

Context.beginPath（）；
Context.moveTo（300200）；
Context.lineTo（500300）；
Context.lineTo（300400）；
context.linejoin =人字；
context.miterlimit = 10；
context.linewidth = 5；
context.strokestyle =蓝色；
context.stroke（）；

Context.beginPath（）；
Context.moveTo（500290）；
Context.lineTo（700300）；
Context.lineTo（500310）；
context.linejoin =人字；
context.miterlimit = 10；
context.linewidth = 5；
context.strokestyle =黑；
context.stroke（）；
}







运行结果：


我们会发现，这miterlimit指定一个自动填充连接点的极限值，超过此值时，该线连接属性将失败，它将改变从斜锥。可以看出，这个值是线的宽度和角度有关，与的关系是什么，看看下面的图片。


正如你所看到的，这种关系有点复杂，有兴趣的小伙伴可以推断这个值与线宽和角度的函数之间的关系，事实上，大部分时间不能用来隐藏这个属性，即使用来写一些感情，也不满意调试。
绘制高级线段的示例
当你在画布上画一条线时，会出现一些奇怪的现象。下面是这节课所学到的两个线段的属性的组合。


Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。






miterlimit




你的浏览器不支持画布让我们换一个！




在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；

1个例子：圆形结尾，角度连接，在画布左上角。
Context.beginPath（）；
Context.moveTo（0,0）；
Context.lineTo（180,0）；
Context.lineTo（180180）；
context.linejoin = 'bevel；
context.linecap =跟着；
context.linewidth = 10；
context.strokestyle =红色；
context.stroke（）；

2个例子：圆形结尾，角度连接，而不是在画布左上角。
Context.beginPath（）；
Context.moveTo（300200）；
Context.lineTo（480200）；
Context.lineTo（480380）；
context.linejoin = 'bevel；
context.linecap =跟着；
context.linewidth = 10；
context.strokestyle =蓝色；
context.stroke（）；

3的示例：平端点、圆形连接，而不是在画布左上角
Context.beginPath（）；
Context.moveTo（600400）；
Context.lineTo（780400）；
Context.lineTo（780580）；
context.linejoin =跟着；
context.linecap = 'butt；
context.linewidth = 10；
context.strokestyle =黑；
context.stroke（）；
}







运行结果：


这3个线段和一个连接实例有助于说明在画布上绘制线段时不同属性的组合。
实例1从左上角画，其结果是一个奇怪的现象。画布路径绘制在X轴方向的起点在Y轴上。为此，1线以上的线似乎更薄。此外，在左上角的水平部分循环的终点是看不见的，他们都关注负面坐标区域外的屏幕。此外，斜斜的角度定义的线连接没有被抽。
实例2实例1调整问题的出发点，离开了左上角，这样，一个完整的绘制水平线和圆形线帽和斜线连接绘制。
实例3显示后的线帽设置删除默认端点效应，与线连接调整到一个角落。