论坛 › 马黑黑教程专版 › svgdr教程·画椭圆

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

svgdr教程·画椭圆

<style>
        .art > p { margin: 12px 0; font: normal 18px/24px sans-serif; }
        .art mark { padding: 2px 6px; background: lightblue; }
        .art svg { outline: 1px solid silver; }
        .tRed { color: red; }
</style>

<h2>画椭圆</h2>
<div class="art">
        <p>指令：<mark>ellipse()</mark></p>
        <p>参数：<mark>cx, cy, rx, ry, fill, stroke, stroke-width</mark></p>
        <p>语法：<mark>ellipse(cx, cy, rx, ry, fill, stroke, stroke-width)</mark></p>
        <p>其中：</p>
        <blockquote>
                ① cx - 椭圆圆心X坐标值，数值<br>
                ② cy - 椭圆圆心Y坐标值，数值<br>
                ③ rx - 椭圆X轴半径，数值<br>
                ④ ry - 椭圆Y轴半径，数值<br>
                ⑤ fill - 填充色，颜色值（字符型）<br>
                ⑥ stroke - 描边色，颜色值（字符型）<br>
                ⑦ stroke-width - 描边线厚度，数值<br>
                * &nbsp; <span class="tRed">数值可以不用引号，字符型需要使用引号，百分比视为字符型</span>
        </blockquote>
        <p>椭圆（ellipse）和圆（circle）在绘制参数上有一定的相似度，但椭圆有两个半径，分别用 rx、ry 表示，指向非常明确，分别是椭圆在X轴、Y轴上的半径。由于椭圆中心点固定，所以，当 rx=ry，它们实际上就是圆的半径 r，画出的自然就是一个妥妥的圆。下面用 svgdr 画出不同形态的椭圆</p>
        <svg id="msvg" width="800" height="400"></svg>
        <p>绘制代码：</p>
        <div id="div1"><pre id="pre1">
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'); // 右下
        </pre></div>
        <p>上面绘制指令生成的SVG代码如下：</p>
        <div id="div2"><pre id="pre2"></pre></div>
        <p>本节示例svgdr画椭圆的完整代码：</p>
        <div id="div3"><pre id="pre3">
&lt;svg id="msvg" width="800" height="400"&gt;&lt;/svg&gt;

&lt;script&gt;
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');
};
&lt;/script&gt;
        </pre></div>
        <p>完整代码可以存为本地 .html 文档然后用浏览器打开，或将代码拿到 <a href="http://mhh.52qingyin.cn/api/pcode/">pencil code</a> 运行。</p>
       
        <p><a href="/forum.php?mod=viewthread&tid=79137&extra=page%3D1" targete="_blank">返回目录</a></p>
</div>

<script type="module">
import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);

hl.hl(div1, pre1);
hl.hl(div3, pre3);

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');

        pre2.textContent = dr.code(msvg);
        hl.hl(div2, pre2);
};
</script>

花飞飞 发表于 2024-11-2 09:17

矮油，说曹操，曹操到。。椭圆教程它就来了。。。
老师今天先出了实例再出教程。。
跟圆最大的区别就是X轴Y轴半径不同吧。

马黑黑 发表于 2024-11-2 09:19

花飞飞 发表于 2024-11-2 09:17
矮油，说曹操，曹操到。。椭圆教程它就来了。。。
老师今天先出了实例再出教程。。
跟圆最大的区别就是X ...

椭圆之所以在呈现形态上有扁的效果，就是因为它有两个半径，这两个半径若不相等，它就会呈现出扁的样貌来。X轴半径大于Y轴半径时，椭圆是躺的，反之是站着的。

花飞飞 发表于 2024-11-2 09:33

马黑黑 发表于 2024-11-2 09:19
椭圆之所以在呈现形态上有扁的效果，就是因为它有两个半径，这两个半径若不相等，它就会呈现出扁的样貌来 ...

好哒，明白了。。。圆和椭圆是近亲哥儿俩。。
圆是基础，椭圆加丢丢变化，进化高级一点，可以区分是站着，还是躺着。
再进化下去，会不会成精。。{:4_170:}

梦江南 发表于 2024-11-2 10:18

跟着老师学代码 。

红影 发表于 2024-11-2 11:05

学习了前面的圆的画法，学这个就容易了，只不过是多增加一个半径{:4_187:}

马黑黑 发表于 2024-11-2 11:07

红影 发表于 2024-11-2 11:05
学习了前面的圆的画法，学这个就容易了，只不过是多增加一个半径

对，很多这类方面的共性，掌握一个之后，其他的势如破竹

红影 发表于 2024-11-2 11:07

能画出来和能做到帖子里，还是不同的，比如前面的实例，如何把椭圆旋转组成小播，如何和音乐、视频关联等等，都是需要考虑的。基础知识和实例相结合，这样的教学真好{:4_199:}

马黑黑 发表于 2024-11-2 11:13

红影 发表于 2024-11-2 11:07
能画出来和能做到帖子里，还是不同的，比如前面的实例，如何把椭圆旋转组成小播，如何和音乐、视频关联等等 ...

先会画，才有资格谈应用

马黑黑 发表于 2024-11-2 11:16

花飞飞 发表于 2024-11-2 09:33
好哒，明白了。。。圆和椭圆是近亲哥儿俩。。
圆是基础，椭圆加丢丢变化，进化高级一点，可以区分是站着 ...

所有的形状都是近亲

小辣椒 发表于 2024-11-2 13:01

这个是真不会了{:4_198:}

马黑黑 发表于 2024-11-2 13:55

小辣椒 发表于 2024-11-2 13:01
这个是真不会了

没有时间学习的话确实会不了

小辣椒 发表于 2024-11-2 14:02

马黑黑 发表于 2024-11-2 13:55
没有时间学习的话确实会不了

是的，很多不会了，前面基本没有学习了

红影 发表于 2024-11-2 14:39

马黑黑 发表于 2024-11-2 11:07
对，很多这类方面的共性，掌握一个之后，其他的势如破竹

尤其这两个这么接近{:4_204:}

红影 发表于 2024-11-2 14:39

马黑黑 发表于 2024-11-2 11:13
先会画，才有资格谈应用

是的，这个是基本功。

马黑黑 发表于 2024-11-2 14:40

红影 发表于 2024-11-2 14:39
是的，这个是基本功。

{:4_181:}

马黑黑 发表于 2024-11-2 14:41

红影 发表于 2024-11-2 14:39
尤其这两个这么接近

其他的图形也都基本有共性的

马黑黑 发表于 2024-11-2 14:41

小辣椒 发表于 2024-11-2 14:02
是的，很多不会了，前面基本没有学习了

这个 svgdr 是全新的，现在才到第三讲

红影 发表于 2024-11-2 15:01

马黑黑 发表于 2024-11-2 14:40


黑黑把svg的画法变得这么简单了，更容易学呢{:4_187:}

红影 发表于 2024-11-2 15:02

马黑黑 发表于 2024-11-2 14:41
其他的图形也都基本有共性的

是的，而且黑黑的讲解从最简单的圆入手，掌握了这个，对其他的也更容易掌握。

查看完整版本: svgdr教程·画椭圆