Javascript 在画布上绘制虚线和虚线矩形的方式与css边框的工作方式相同：绘制4条相同的边

我的用例是模拟css边界渲染。是否可以使用的方法模拟与css渲染器相同的边框绘制，如

边框：5px红色虚线

。考虑这个例子：

let canvas=document.querySelector（'canvas'）；
设ctx=canvas.getContext（'2d'）；
ctx.lineWidth=5
ctx.strokeStyle='红色'
ctx.lineCap='square'
ctx.setLineDash（[10,10]）；
ctx.beginPath（）；
ctx.moveTo（2.5,2.5）；
ctx.rect（2.5,2.5195,65）；
ctx.stroke（）
div{
边框：5px红色虚线；
宽度：200px；
高度：70像素；
框大小：边框框；
边缘底部：5px；
}
帆布{
显示：块；
宽度：200px；
高度：70像素；
}
CSS
边框样式：虚线
算法不受规格限制，因此不可能在画布API中呈现完全相同的效果

然后，您必须知道，即使是CSS也会逐行呈现：
边框
是所有
边框顶部XXX
，
边框右侧XXX
，
边框底部XXX
，
边框左侧XXX


这就是为什么它的行为是这样的：每个边界都有独立于其他边界的线划线

无论如何，如果您想使用canvas API来实现这一点，最简单的解决方案是使用四行并分别设置它们的虚线

下面是对破折号进行规范化的粗略尝试，以使其始终从边缘开始和结束：


var ctx=c.getContext（'2d'）；
ctx.lineCap='方形'；
//返回每个段的标准化数组
//这与任何浏览器的实现都不一样，
//这只是一种让破折号始终从边缘开始和结束的懒散方式
函数getLineDash（x1、y1、x2、y2）{
变量长度=数学正态分布（（x2-x1），（y2-y1））；
变量破折号长度=长度/8；
var nb_of_破折号=长度/破折号长度；
var破折号间隙=（破折号长度*0.66）；
破折号长度-=破折号间隙*0.33；
返回[短划线长度，短划线间隙]；
}
函数绘图（）{
ctx.lineWidth=线宽值；
ctx.clearRect（0，0，c.宽度，c.高度）；
变量点=[
[x1_.值，y1_.值]，
[x2_.值，y2_.值]，
[x3值，y3值]，
[x4值，y4值]
];
点。forEach（函数（pt，i）{
var next=点数[（i+1）%points.length]；
ctx.beginPath（）；
ctx.moveTo（pt[0]，pt[1]）；
ctx.lineTo（next[0]，next[1]）；
ctx.setLineDash（getLineDash（pt[0]，pt[1]，next[0]，next[1]）；
ctx.stroke（）；
});
}
draw（）；
document.oninput=函数（e）{
if（e.target.parentNode.parentNode==输入）{
draw（）；
}
}
标签{
显示：内联块；
}
输入{
最大宽度：50px；
}

x1
y1
x2
y2
x3
y3
x4
y4
线宽
非常感谢您的澄清和演示。我将使用线条，因为它看起来是渲染虚线的最可预测和最正确的方法，也可以使用圆点