【绘制】HTML5 线段端点和连接点的绘制（图文、示例）
/10/2 19:09:45
我的处女作《系列教程》在我的上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作 。
教程介绍、教程目录等能在里查阅 。
传送门：
线段介绍
中绘图环境与线段有关的属性：
属性描述类型取值范围默认值
线段宽度（以像素为单位）
非零正数
1.0
如何绘制线段端点
butt、round、
butt
如何绘制线段连接点
round、bevel、miter
bevel
斜接线的长度与二分之一线宽的比值 。如果斜接线长度超过该值，则以bevel绘制线段连接点
非零正整数
10.0
【图文、示例【绘制】HTML5 Canvas线段端点和连接点的绘制】线段端点
线段端点，是指线段两端的位置，也就是“线帽（line cap）”的样子 。如图所示，下面是三种线帽，分别是“不加帽子”、“加个圆帽”、“加个方帽” 。

文章插图
在绘图环境中，控制线段端点的属性正好叫做，从上到下这三种样式分别对应“butt”、“round”、“” 。
在线演示 详细代码
线段连接点
绘制线段或矩形时，你可以控制两条线段连接处的那个拐弯，也就是线段连接点（line join）应该怎么画，在绘图环境中，由属性控制 。
从上到下这三种属性分别是“round”、“bevel”、“miter” 。
在线演示 详细代码
线段连接点的具体构建方式
当我们为使用miter属性的时候，我们可以指定一个属性，它表示斜接线(miter)长度与二分之一宽度的比值，斜接线长度计量方式如图所示 。
斜接线长度的计量方式
如果斜接线过长，浏览器就会以bevel样式来处理线段连接点

• ROS 1 和 ROS 2 的前世、今生、安装使用说明与资料汇总
• Vue2 新手上路无处不在的特殊符号，让人傻傻分不清 “:”、“
• 【笔记】openwrt - iptables 命令、例子、日志
• 二、数据安全风险评估标准
• 自觉php第一步做什么,PHP面向对象到底是啥？十分钟通俗易懂图文教程
• 二 Elasticsearch 基础之安装
• python datetime.datetime、datetime
• 10月6日、8日、10日邯郸实行临时交通管制 注意交通管制时间
• 21、DateTime.ParseExact使用小记一
• LwIP 之二 网络接口 netif（netif.c、ethernetif