评论资讯 [ 总 380 则 ]
·悄然 - 2024-11-13 15:01
·悄然 - 2024-11-13 11:23
·小希 - 2024-11-12 19:20
·悄然 - 2024-11-12 14:48
·悄然 - 2024-11-11 19:30
·飞飞 - 2024-11-11 18:53
·悄然 - 2024-11-11 14:10
·飞飞 - 2024-11-10 09:29
·悄然 - 2024-11-10 09:25
·小希 - 2024-11-10 09:11
·悄然 - 2024-11-13 11:23
·小希 - 2024-11-12 19:20
·悄然 - 2024-11-12 14:48
·悄然 - 2024-11-11 19:30
·飞飞 - 2024-11-11 18:53
·悄然 - 2024-11-11 14:10
·飞飞 - 2024-11-10 09:29
·悄然 - 2024-11-10 09:25
·小希 - 2024-11-10 09:11
友情链接
网站统计
svgdr教程·画椭圆
画椭圆
指令：ellipse()
参数：cx, cy, rx, ry, fill, stroke, stroke-width
语法：ellipse(cx, cy, rx, ry, fill, stroke, stroke-width)
其中：
① cx - 椭圆圆心X坐标值，数值
② cy - 椭圆圆心Y坐标值，数值
③ rx - 椭圆X轴半径，数值
④ ry - 椭圆Y轴半径，数值
⑤ fill - 填充色，颜色值（字符型）
⑥ stroke - 描边色，颜色值（字符型）
⑦ stroke-width - 描边线厚度，数值
* 数值可以不用引号，字符型需要使用引号，百分比视为字符型
椭圆（ellipse）和圆（circle）在绘制参数上有一定的相似度，但椭圆有两个半径，分别用 rx、ry 表示，指向非常明确，分别是椭圆在X轴、Y轴上的半径。由于椭圆中心点固定，所以，当 rx=ry，它们实际上就是圆的半径 r，画出的自然就是一个妥妥的圆。下面用 svgdr 画出不同形态的椭圆
绘制代码：
dr.ellipse(100, 100, 90, 60, 'hotpink'); // 左上
dr.ellipse(100, 300, 90, 60, 'none', 'purple'); // 左下
dr.ellipse(300, 100, 60, 90, 'hotpink', 'purple', 4); // 左二上
dr.ellipse(300, 300, 60, 90, 'none', 'purple', 4); // 左二下
dr.ellipse(500, 100, 90, 60).style('fill: plum'); // 右二上
dr.ellipse(500, 300, 90, 60).style('fill: none; stroke: navy'); // 右二下
dr.ellipse(700, 100, 60, 90).style('fill: plum; stroke: navy; stroke-width: 4'); // 右上
dr.ellipse(700, 300, 60, 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.ellipse(100, 100, 90, 60, 'hotpink');
dr.ellipse(100, 300, 90, 60, 'none', 'purple');
dr.ellipse(300, 100, 60, 90, 'hotpink', 'purple', 4);
dr.ellipse(300, 300, 60, 90, 'none', 'purple', 4);
dr.ellipse(500, 100, 90, 60).style('fill: plum');
dr.ellipse(500, 300, 90, 60).style('fill: none; stroke: navy');
dr.ellipse(700, 100, 60, 90).style('fill: plum; stroke: navy; stroke-width: 4');
dr.ellipse(700, 300, 60, 90).style('fill: none; stroke: navy; stroke-width: 4');
};
</script>
完整代码可以存为本地 .html 文档然后用浏览器打开，或将代码拿到 pencil code 运行。
前一篇: svgdr教程·画圆
下一篇: svgdr教程·画矩形
发表评论:
评论列表 [0条]
