内切多边形代码及演示
<style>
.ma {
margin: 30px auto;
width: 400px;
height: 400px;
background: tan;
}
</style>
<div class="ma"></div>
<p>
<label for="pointsNum">顶点数：</lable>
<input id="pointsNum" type="range" max="20" min="3" value="3" />
<output id="pointsMsg">3</output>
</p>
<p id="pathData"></p>
<script>
const ma = document.querySelector('.ma'); // 待操作元素
let total = 3; // 顶点数（多边形的边总数）
const clipBox = (total) => {
// 获取顶点坐标值 ：参数 r 为多边形外接圆半径
const getPoints = (r) => {
const a = 360 / total; // 平均角度
const R = ma.clientWidth / 2; // 外接圆半径
let res = []; // 坐标值数组
// 遍历所有顶点计算其坐标值
Array.from({length: total}).forEach((_,k) => {
const x = R + r * Math.cos(Math.PI / 180 * a * k);
const y = R + r * Math.sin(Math.PI / 180 * a * k);
res.push({x: x, y: y});
});
res.push(res[0]); //回到原点
return res; // 返回数组
};
const ar1 = getPoints(200); // 外层坐标集 半径要大于里层半径
const ar2 = getPoints(180).reverse(); // 里层坐标集(反转) 半径要小于外层半径
let path = 'M'; // 路径
ar1.forEach((ar, key) => path += `${ar.x}, ${ar.y} `); // 加入外层路径
ar2.forEach((ar, key) => path += `${ar.x}, ${ar.y} `); // 加入里层路径
ma.style.clipPath = `path('${path}')`; // 切割
pathData.textContent = 'clip-path: ' + ma.style.clipPath + ';'; // clip-path属性
};
pointsNum.onchange = () => {
pointsMsg.value = pointsNum.value;
total = pointsNum.value * 1;
clipBox(total);
};
clipBox(total);
</script>
前一篇: 《Amernan - Matsuri》代码解析
下一篇: 使用mask属性实现图片转场
发表评论:
评论列表 [1条]
#1 | 知名不具 于 2025-8-7 13:22 发布: 这个太好了，还能调整顶点数呢。
