评论资讯 [ 总 775 则 ]
·悄然 - 2026-1-17 10:21
·飞飞 - 2026-1-17 10:19
·马黑 - 2026-1-17 10:09
·飞飞 - 2026-1-15 16:20
·悄然 - 2026-1-15 16:19
·马黑 - 2026-1-15 12:19
·悄然 - 2026-1-15 08:58
·飞飞 - 2026-1-14 15:25
·飞飞 - 2026-1-1 08:43
·飞飞 - 2025-12-24 18:49
·飞飞 - 2026-1-17 10:19
·马黑 - 2026-1-17 10:09
·飞飞 - 2026-1-15 16:20
·悄然 - 2026-1-15 16:19
·马黑 - 2026-1-15 12:19
·悄然 - 2026-1-15 08:58
·飞飞 - 2026-1-14 15:25
·飞飞 - 2026-1-1 08:43
·飞飞 - 2025-12-24 18:49
友情链接
网站统计
生成svg星形图案和路径
运行以下代码可以生成星形图案和图案的 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条]

