svg彩虹伞
彩虹伞
彩虹伞是彩虹七颜色做成的伞。svg画出这样的伞，首先需要定好颜色，我们采用的是中国传统的赤橙黄绿青蓝紫这七种颜色。下一步制定思路：在一个圆里用七个等腰三角形填充，每一个三角形的等腰边构成的夹角都在圆心处，等腰边夹角的对边用向里的弧形替代。这样的形状需要用 path 元素绘制。以下代码，我们将圆七等分，分别计算每一个三角形等腰边在圆周上的交点的xy坐标，然后用path依次将三角形的三个点连接起来，并给每一个三角形着色，最后形成彩虹伞。伞顶用svg代码另外绘制了一个圆点，它处在圆的正中央。
<svg id="ssvg" width="300" height="300" style="border: 1px solid gray;"> <circle id="yuan" cx="150" cy="150" r="5" fill="snow" /> </svg> <script> let sepan = () => { /* 彩虹颜色数组 */ let colors = ['red','orange','yellow','green','cyan','blue','purple']; /* 获取svg宽高 */ let ww = ssvg.getAttribute('width') || 200, hh = ssvg.getAttribute('height') || 200; /* 圆心坐标和圆半径取svg宽高最短边值 */ let c = r = ww > hh ? hh / 2 : ww / 2; let a = 360 / 7; /* 角度 : 圆周七等分 */ yuan.setAttribute('cx',c); /* 小圆点圆心X坐标 */ yuan.setAttribute('cy',c); /* 小圆点圆心Y坐标 */ /* 用 for 循环依次绘制七个三角形 */ for(j = 0; j < 7; j++) { let color = colors[j]; /* 取颜色 */ let a1 = a * j; /* 三角形等腰边1与圆周交点的角度 */ let a2 = a1 + a; /* 三角形等腰边2与圆周交点的角度 */ /* 下面使用余弦正弦函数分别获取交点1和交点2的XY坐标值 */ let x1 = c + r * Math.cos(Math.PI / 180 * a1), x2 = c + r * Math.cos(Math.PI / 180 * a2), y1 = c + -r * Math.sin(Math.PI / 180 * a1), y2 = c + -r * Math.sin(Math.PI / 180 * a2); /* 创建svg path元素 */ let path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); /* 设置 path d 路径属性值 */ path.setAttribute('d', `M ${c} ${c} L${x1} ${y1} A ${c} ${c} 0 0 1 ${x2} ${y2} L${c} ${c}`); /* 设置 path 填充颜色 */ path.setAttribute('fill', color); /* 将 path 添加到 id="yuan" 的circle的前面（放后面圆点会被覆盖） */ ssvg.insertBefore(path, yuan); } }; sepan();/* 运行绘制彩虹伞函数 */ </script>
svg的宽高可以修改，程序将判断宽高尺寸，以最小边为基准绘制图像。至于y1 y2取负值，仅是为了令颜色按逆时针方向排列。
前一篇: svg pattern动画演示
下一篇: svg动画之 animate（二）
发表评论:
评论列表 [1条]
#1 | 悄然 于 2023-11-16 18:02 发布: 好形象的小花伞，好看。。
