svgdr教程·画矩形

位置: 首页 > svgdr
[发布: 2024.11.3  作者: 马黑  阅读: 38]

画矩形

指令:rect()

参数:x, y, width, height, fill, stroke, stroke-width, rx, ry

语法:rect(x, y, width, height, fill, stroke, stroke-width, rx, ry)

其中:

① x - 矩形左上角X坐标值,数值
② y - 矩形左上角Y坐标值,数值
③ width - 矩形宽度值,数值
④ height - 矩形高度值,数值
⑤ fill - 填充色,颜色值(字符型)
⑥ stroke - 描边色,颜色值(字符型)
⑦ stroke-width - 描边线厚度,数值
⑧ rx - 矩形水平方向圆角半径,数值
⑨ ry - 矩形垂直方向圆角半径,数值
*   数值可以不用引号,字符型需要使用引号,百分比视为字符型

矩形常规参数(即SVG矩形标签属性)较多,实际绘制时至少需要前四个属性,这将得到一个黑色填充的矩形(下方演示的第一个矩形即是)。SVG矩形可以拥有圆角半径属性,分为X方向和Y方向方向两个半径,分别记作 rx、ry。这两个半径只设一个时,另一个缺省值与之相等,当任意一个设置为0时,另一个的设置无效;圆角半径的值为纯数字时视为使用px做单位,支持百分比,在 svgdr 百分比需要使用引号。看看svgdr绘制矩形的几种方法:

绘制代码:

sc.onload = () => {
	var dr = _dr(msvg); //声明画笔
	//开始绘制
	dr.rect(20, 20, 160, 60);
	dr.rect(20, 120, 160, 60, 'cornflowerblue');
	dr.rect(20, 220, 160, 60, 'cornflowerblue', 'indigo');
	dr.rect(20, 320, 160, 60, 'cornflowerblue', 'indigo', 4);
	dr.rect(220, 20, 160, 60, 'cornflowerblue', 'indigo', 4, 8);
	dr.rect(220, 120, 160, 60, 'cornflowerblue', 'indigo', 4, 8, 16);
	dr.rect(220, 220, 160, 60, 'none', 'indigo');
	dr.rect(220, 320, 160, 60, 'none', 'indigo', 4);
	dr.rect(420, 20, 160, 60, 'none', 'indigo', 4, 8);
	dr.rect(420, 120, 160, 60, 'none', 'indigo', 4, 8, 16);
	//下面使用其他指令以追加方式继续绘制
	dr.rect(420, 220, 160, 60, 'forestgreen').rx(16);
	dr.rect(420, 320, 160, 60, 'forestgreen').rx(16).ry(32);
	dr.rect(620, 20, 160, 160, 'forestgreen').rx('50%');
	dr.rect(620, 220, 160, 160, 'forestgreen').ry('50%').stroke('indigo', 6);
};

	

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

本节示例svgdr画矩形的完整代码:

<svg id="msvg" width="800" height="400"></svg>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);

sc.onload = () => {
var dr = _dr(msvg);
	dr.rect(20, 20, 160, 60);
	dr.rect(20, 120, 160, 60, 'cornflowerblue');
	dr.rect(20, 220, 160, 60, 'cornflowerblue', 'indigo');
	dr.rect(20, 320, 160, 60, 'cornflowerblue', 'indigo', 4);
	dr.rect(220, 20, 160, 60, 'cornflowerblue', 'indigo', 4, 8);
	dr.rect(220, 120, 160, 60, 'cornflowerblue', 'indigo', 4, 8, 16);
	dr.rect(220, 220, 160, 60, 'none', 'indigo');
	dr.rect(220, 320, 160, 60, 'none', 'indigo', 4);
	dr.rect(420, 20, 160, 60, 'none', 'indigo', 4, 8);
	dr.rect(420, 120, 160, 60, 'none', 'indigo', 4, 8, 16);
	dr.rect(420, 220, 160, 60, 'forestgreen').rx(16);
	dr.rect(420, 320, 160, 60, 'forestgreen').rx(16).ry(32);
	dr.rect(620, 20, 160, 160, 'forestgreen').rx('50%');
	dr.rect(620, 220, 160, 160, 'forestgreen').ry('50%').stroke('indigo', 6);
};
</script>
	

完整代码可以存为本地 .html 文档并使用浏览器打开,或将代码拿到 pencil code 运行。

返回目录

前一篇: svgdr教程·画椭圆
下一篇: svgdr教程·画多边形

发表评论:

  
 

评论列表 [1条]

#1 | 悄然 于 2024-11-3 08:41 发布: 这个矩形好漂亮,后面还多了两个圆角参数。。如果无填充,还是要none来占位。。

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com