svgdr教程·画圆
画圆
指令：circle()
参数：cx, cy, r, fill, stroke, stroke-width
语法：circle(cx, cy, r, fill, stroke, stroke-width)
其中：
① cx - 圆心X坐标值，数值
② cy - 圆心Y坐标值，数值
③ r - 圆的半径，数值
④ fill - 填充色，颜色值（字符型）
⑤ stroke - 描边色，颜色值（字符型）
⑥ stroke-width - 描边线厚度，数值
* 数值可以不用引号，字符型需要使用引号，百分比视为字符型
先说明一下：svgdr 各指令所需参数指向svg对应元素的属性，基本遵循svg各元素使用时的属性排列习惯。像 circle() 指令对应 <circle> 标签，画圆，一般在该标签的属性中，按照圆心x、y坐标、半径、填充色、描边色、描边线厚度这样的顺序安排各个属性。svgdr 各指令所需参数看上去很多，但是不是所要的参数都非使用不可，通用的规范是：不论用多少个参数，都按从头到尾的顺序依次选用，例如画圆时我们只用到填充色，那就使用前面四个参数，但不能跳跃使用参数，例如画空心圆不需要填充色，就给它一个 'none' 值，然后才给出第五个参数 stroke 描边颜色。以下例子，分别展示画圆的参数使用方法，注意观察比照：
绘制代码：
dr.circle(100, 100, 90, 'steelblue'); //四个参数 : 实心圆
dr.circle(100, 300, 90, 'none', 'red'); //五个参数 ：空心圆
dr.circle(300, 100, 90, 'steelblue', 'red', 4); //全参数 ：实心描边圆
dr.circle(300, 300, 90, 'none', 'red', 4); //全参数 ：空心圆
//下面都是三个参数+style指令画出的圆（style指令后续会有专门介绍）
dr.circle(500, 100, 90).style('fill: tan');
dr.circle(500, 300, 90).style('fill: none; stroke: navy; stroke-width: 4');
dr.circle(700, 100, 90).style('fill: tan; stroke: navy; stroke-width: 4');
dr.circle(700, 300, 90).style('fill: none; stroke: navy; stroke-width: 4');
以上代码生成的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.circle(100, 100, 90, 'steelblue');
dr.circle(100, 300, 90, 'none', 'red');
dr.circle(300, 100, 90, 'steelblue', 'red', 4);
dr.circle(300, 300, 90, 'none', 'red', 4);
dr.circle(500, 100, 90).style('fill: tan');
dr.circle(500, 300, 90).style('fill: none; stroke: navy');
dr.circle(700, 100, 90).style('fill: tan; stroke: navy; stroke-width: 4');
dr.circle(700, 300, 90).style('fill: none; stroke: navy; stroke-width: 4');
};
</script>
返回目录
前一篇: svgdr教程：插件的引用和使用
下一篇: svgdr教程·画椭圆
发表评论:
评论列表 [2条]
#2 | 飞飞 于 2024-11-1 20:13 发布: 圆的参数讲究顺序，倘若缺席需要有人占位。很严谨。。
#1 | 小白 于 2024-11-1 20:11 发布: 我的天，有这么多圆展示，放在一起很壮观，对比学习十分好用。。。
