请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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 的正弦取所正负值相配套。
|