评论资讯 [ 总 421 则 ]
·悄然 - 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-1 12:39
·飞 - 2024-11-30 19:01
·小白 - 2024-11-29 19:51
·飞飞 - 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-1 12:39
·飞 - 2024-11-30 19:01
·小白 - 2024-11-29 19:51
友情链接
网站统计
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>
返回目录
前一篇: SVG Drawer预览版及其文档
下一篇: svgdr教程·画椭圆
发表评论:
评论列表 [2条]
#2 | 飞飞 于 2024-11-1 20:13 发布: 圆的参数讲究顺序,倘若缺席需要有人占位。很严谨。。
#1 | 小白 于 2024-11-1 20:11 发布: 我的天,有这么多圆展示,放在一起很壮观,对比学习十分好用。。。