请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2023-11-16 07:41 编辑
彩虹伞
彩虹伞是彩虹七颜色做成的伞。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'),
hh = ssvg.getAttribute('height');
/* 处理svg宽高意外 */
if(ww < 50) ww = 50;
if(hh < 50) hh = 50;
ssvg.setAttribute('width', ww);
ssvg.setAttribute('height', hh);
/* 圆心坐标和圆半径取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 0 ${x2} ${y2} L${c} ${c}`);
/* 设置 path 填充颜色 */
path.setAttribute('fill', color);
/* 将 path 添加到 id="yuan" 的circle的前面（放后面圆点会被覆盖） */
ssvg.insertBefore(path, yuan);
}
};
sepan();/* 运行绘制彩虹伞函数 */
</script>
svg的宽高可以修改，程序将判断宽高尺寸，以最小边为基准绘制图像。如果需要圆环七彩虹色盘，把 A 指令的 0 0 0 改为 0 0 1 便可，当然，这需要与 y1 y2 的正弦取所正负值相配套。
| 
发表于 2023-11-16 07:38
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2023-11-16 16:53
