CSS数学函数与折线绘制实例页面

CSS代码：

.box {
    max-width: 360px;
    height: 150px;    
    border: 1px solid #bbb;
    position: relative;
    --p1x: calc(var(--x1) * 1px);
    --p1y: calc(var(--y1) * 1px);
    --p2x: calc(var(--x2) * 1px);
    --p2y: calc(var(--y2) * 1px);
}
.box > i {
    position: absolute;
    width: 5px; height: 5px;
    border-radius: 100%;
    background-color: currentColor;    
}
.dot1,
.line {
    left: var(--p1x);
    top: var(--p1y);
}
.dot2 {
    left: var(--p2x);
    top: var(--p2y);
}
.line {
    position: absolute;
    border-top: 1px solid;
    width: 100px;
    width: hypot(var(--p2y) - var(--p1y), var(--p2x) - var(--p1x));
    transform-origin: left bottom;
    transform: rotate(atan((var(--y2) - var(--y1)) /  (var(--x2) - var(--x1))));
}

HTML代码：

<div id="box" class="box">
    <i class="dot1"></i>
    <span class="line"></span>
    <i class="dot2"></i>
</div>  
<p><button id="button">随机两个点</button></p>
                

JS代码：

button.onclick = function () {
    box.style.setProperty('--x1', Math.round(150 * Math.random()));    
    box.style.setProperty('--y1', Math.round(150 * Math.random()));    
    box.style.setProperty('--x2', 150 + Math.round(150 * Math.random()));    
    box.style.setProperty('--y2', Math.round(150 * Math.random()));    
};
button.click();