评论资讯 [ 总 424 则 ]
·了了 - 2024-12-18 21:32
·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27
·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27
友情链接
网站统计
svgdr教程·画矩形
画矩形
指令：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来占位。。
