马黑PHP整站系统

svgdr教程·画圆

位置: 首页 > svgdr[ 发布时间: 2024.11.1  作者: 马黑  阅读: 93 ]

画圆

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

返回目录

前一篇: SVG Drawer预览版及其文档
下一篇: svgdr教程·画椭圆

发表评论:

       

评论列表 [2条]

#2 | 飞飞 于 2024-11-1 20:13 发布: 圆的参数讲究顺序,倘若缺席需要有人占位。很严谨。。

#1 | 小白 于 2024-11-1 20:11 发布: 我的天,有这么多圆展示,放在一起很壮观,对比学习十分好用。。。

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