svgdr教程·画圆

马黑黑 · 发表于 2024-11-1 08:02

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-11-1 09:48 编辑

画圆

指令：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>

返回目录