生成svg星形图案和路径

位置: 首页 > 代码集锦
[发布: 2023.11.10 作者: 马黑阅读: 183]

运行以下代码可以生成星形图案和图案的 path 路径，可以在线修改：① 行1的svg宽高；② 行7的圆心 c、大小圆半径 r1 和 r2、顶点数 num 和初始角度偏移量 angpy 制作自己所需要的图案。

<svg width="200" height="200">
    <path id="mypath" d="M0 0 L200 200" fill="none" stroke="red" />
</svg>
<p><output id="pathMsg"></output></p>

<script>
let c = 100, r1 = 10, r2 = 95, num = 3, angpy = 0;
let points = [];
for(i = 0; i< num; i++) {
    let angle = 360 / num * i + angpy;
    let x1 = (c + Math.cos(angle * Math.PI / 180) * r1).toFixed(2),
        y1 = (c + Math.sin(angle * Math.PI / 180) * r1).toFixed(2),
        x2 = (c + Math.cos((angle + 360 / num / 2) * Math.PI / 180) * r2).toFixed(2),
        y2 = (c + Math.sin((angle + 360 / num / 2) * Math.PI / 180) * r2).toFixed(2);
    points.push([x1 + ' ' + y1], [x2 + ' ' + y2]);
}
let d = 'M' + points.join(',') + 'z';
mypath.setAttribute('d', d);
pathMsg.innerText = '路径：' + d;

</script>

前一篇: svg : rect to path 演示
下一篇: js+css+svg花朵演示

发表评论:

评论列表 [0条]