svgdr教程·画椭圆

马黑黑 · 发表于 2024-11-2 09:03

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

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

x

画椭圆

指令：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 运行。

返回目录