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来占位。。