|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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>
返回目录
|
评分
-
| 参与人数 3 | 威望 +110 |
金钱 +220 |
经验 +80 |
收起
理由
|
花飞飞
| + 30 |
+ 60 |
|
很给力! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
梦江南
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|