svgdr教程·画多边形

马黑黑

画多边形

指令：polygon()

参数：points, fill, stroke, stroke-width, stroke-linejoin

语法：polygon(points, fill, stroke, stroke-width, stroke-linejoin)

其中：

① points - 多边形各顶点XY坐标集合（字符型），例如：'x1 y1, x2 y2, x3 y3, ..., xn yn'
② fill - 填充色，颜色值（字符型）
③stroke - 描边色，颜色值（字符型）
④ stroke-width - 描边线厚度，数值
⑤ stroke-linejoin - 矩形转角处描边形状（字符型，缺省值 bevel，可选值 miter、round）
*   数值可以不用引号，字符型需要使用引号，百分比视为字符型

参数一 points 是多边形各个角基于svg画布坐标系的XY坐标值，这是一个组合，最少需要三组xy坐标值，比如画三角形，'100 0, 200 200, 0 200'，最后一个点到原点可以省略，所以只需要三个角的点坐标值，当然最后也可以给出原点坐标值；参数二、三、四好理解，这里不多讲；参数五 stroke-linejoin 是描边转角处的样式，值有好几个，通常用到的有 miter（斜接，即尖角缺省值），bevel（斜切）和 round（圆角）。需要注意的是，只有设置了描边（stroke） stroke-linejoin 属性的设置才生效，且当描边厚度（stroke-width）值越大转角样式的效果越明显。

以上图案的 svgdr 绘制代码：

sc.onload = () => {
	var dr = _dr(msvg); //声明画笔
	//开始绘制
	dr.polygon('100 20, 20 100, 100 180, 180 100'); //左上 ：一个参数
	dr.polygon('100 220, 20 300, 100 380, 180 300', 'tan'); //左下 ：两个参数	
	dr.polygon('300 20, 220 100, 300 180, 380 100', 'none', 'purple', 20); //左二上 ：斜接转角
	dr.polygon('300 220, 220 300, 300 380, 380 300', 'none', 'purple', 20, 'round'); //左二下 ：圆形转角
	dr.polygon('500 20, 420 100, 500 180, 580 100', 'none', 'purple', 20, 'bevel'); //右二上 ：斜切转角
	dr.polygon('500 220, 420 300, 500 380, 580 300', 'tan', 'purple', 10, 'bevel'); //右二下 ：填充+描边+斜切转角
	dr.polygon('650 20, 780 100, 700 200, 780 300, 650 380', 'none', 'teal', 10, 'round'); //右 ：任意形状多边形
};

	

上面绘制指令生成的SVG代码如下：

最后给一个完整示例代码：使用N个同一样式的多边形通过旋转一定角度、拉开一定距离组合成一个漂亮的图案。绘制指令中用到形变 transform()，用来设定旋转与位移，以后会专门介绍。

<svg id="polygon" width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200">
 
<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr1 = draw.dr(polygon);
 
var total = 20;
for(var i = 0; i < total; i ++) {
	var deg = 360 / total * i;
	dr1.polygon('0 -80, -10 -60, 0 0, 10 -60', 'tan').transform(`rotate(${deg}) translate(0 -10)`);
}
</script>
	

上例图案代码可以存为本地 .html 文档并使用浏览器打开，或将代码拿到 pencil code 运行。

返回目录

红影

黑黑辛苦了，每天一个新讲解，这要花费很多功夫的

红影

这个多边形，除了前面的图案本身加填充描边线宽外，还多了个转角处描边形状，这个需要好好学习一下。
“只有设置了描边（stroke） stroke-linejoin 属性的设置才生效，且当描边厚度（stroke-width）值越大转角样式的效果越明显。”记下了

红影

stroke-linejoin 转角描边形状常用的三种
miter——斜接，即尖角，这个是默认的，不设置默认就是它了，嗯，这个不用记了，让它默认就是了
bevel——斜切，即平角，黑黑给出了例子，并用不同线宽展示了效果。这个转角90，看着像两斜率平均
round——圆角，自动给出圆润的角，圆弧半径默认的。应该是线宽的一半吧。

以上形状都在线宽外侧的，线宽内侧没有影响。

红影

红影

这个图案好漂亮啊。多边形可以做出很多形状来，再加上图案组合，可以有无数的可能。 把黑黑案例里最后那个任意形状的图形套用到下面N个形状的组合里，做了10个，拉开20的距离，就变这样

红影

真好玩，多边形的组合真的有无限可能呢

红影

同样是上面的例子，再来个齿轮

马黑黑

红影 发表于 2024-11-4 09:55
同样是上面的例子，再来个齿轮

梦江南

谢谢老师老师辛苦！

红影

马黑黑 发表于 2024-11-4 12:01

多边形的组合可能性实在是太多了

马黑黑

红影 发表于 2024-11-4 18:08
多边形的组合可能性实在是太多了

任何形状的组合都会有很多可能性

红影

马黑黑 发表于 2024-11-4 19:11
任何形状的组合都会有很多可能性

svg为想象力插上了翅膀

马黑黑

红影 发表于 2024-11-4 19:15
svg为想象力插上了翅膀

HTML也在一定程度做的很好的

小辣椒

其实这个学学真有用的，也是好玩的

小辣椒

这个对我来说有点生疏了，没有连贯的学习感觉有难度了

花飞飞

矩形转角处描边形状（字符型，缺省值 bevel，可选值 miter、round）
这个转角样式有点少。。
不过比没有好。。
至少有一个能让边角柔和一丢丢。。

花飞飞

关于旋转，看来这个中心点的设定十分重要，应该又要牵涉到计算。。translate(0 -10)
算术好的应该可以出更漂亮图案。。

花飞飞

points, 这个参数便能有无数可能。。。。想想还是很壮观的。。

马黑黑

花飞飞 发表于 2024-11-4 21:35
points, 这个参数便能有无数可能。。。。想想还是很壮观的。。

其实这类东东就是描述，用数字去描述每一个点的二维位置