青少年编程与数学 01-008 在网页上完成计算 16课题、绘制几何图形

明月看潮生

于 2024-08-12 07:59:27 发布

阅读量151

点赞数 3

分类专栏： # 编程与数学第01阶段文章标签：青少年编程前端 JavaScript 编程与数学

本文链接：https://blog.csdn.net/qq_40071585/article/details/141116833

版权

编程与数学第01阶段专栏收录该内容

204 篇文章 0 订阅

订阅专栏

青少年编程与数学 01-008 在网页上完成计算 16课题、绘制几何图形

一、几何
二、基本几何图形
三、三角形
四、四边形
五、圆
六、图形绘制
七、调试练习

在网页上绘制几何图形。

一、几何

几何是数学的一个分支，主要研究空间中物体的形状、大小、相对位置以及它们之间的变换。它可以分为几个主要领域：

欧几里得几何：基于古希腊数学家欧几里得的《几何原本》，主要研究平面和三维空间中的直线、圆、多边形等图形的性质。
非欧几里得几何：在19世纪发展起来，包括了与欧几里得几何不同的公理系统，如双曲几何和椭圆几何。
解析几何：由笛卡尔和费马在17世纪创立，使用坐标系统来研究几何图形，将几何问题转化为代数问题。
微分几何：研究曲线和曲面的微分和积分性质，是现代物理学和工程学中非常重要的数学工具。
代数几何：使用代数方法研究几何问题，几何对象通常由多项式方程定义。
拓扑几何：研究在连续变换下保持不变的性质，如连通性、紧致性等。
计算几何：使用计算机算法解决几何问题，如图形的构造、变换和识别。

几何学在建筑、工程、艺术、物理学和其他科学领域都有广泛的应用。

二、基本几何图形

基本几何图形是构成更复杂几何形状的简单图形。以下是一些常见的基本几何图形：

点：几何学中最基本的元素，没有大小和形状，只有位置。
线：由无数点组成的一维对象，具有长度但没有宽度或高度。
直线：无限延伸的线，没有端点。
射线：从一点出发，沿一个方向无限延伸的线。
线段：有限长度的线，有两个端点。
角：由两条射线在共同端点处形成的图形，通常用度数或弧度来度量。
多边形：由若干条线段首尾相连形成的封闭平面图形。常见的多边形包括：
- 三角形：三边形，有三个角和三条边。
- 四边形：四边形，有四个角和四条边，如矩形、正方形、梯形、菱形等。
- 五边形、六边形、七边形等：具有五条、六条、七条或更多边的多边形。
圆：所有点与中心点等距离的点的集合，具有连续的曲线边界。
椭圆：类似于圆，但沿着两个主轴的点与中心点的距离不等。
抛物线：一种二次曲线，每一点到一个固定点（焦点）和一条固定直线（准线）的距离相等。
双曲线：一种二次曲线，由两个分支组成，每个分支都是一个开曲线。
正多边形：具有相同边长和角度的多边形，如正三角形、正方形、正五边形等。
立体图形：具有三维空间的几何形状，如：
- 立方体（正方体）：六个面都是正方形的立体图形。
- 长方体：六个面都是矩形的立体图形。
- 圆柱：两个平行的圆形底面和连接它们的侧面形成的立体图形。
- 圆锥：一个圆形底面和一个顶点，侧面是逐渐收缩到顶点的曲面。
- 球体：所有点与中心点等距离的点的集合，具有连续的曲面。

这些基本几何图形是几何学研究的基础，它们的性质和关系构成了几何学的核心内容。

三、三角形

三角形是最基本的多边形之一，由三条线段首尾相连组成。下面是对三角形的一些基本解析：

边：三角形有三条边，通常用a、b、c表示。
角：三角形有三个角，通常用A、B、C表示，其中角A是与边a相对的角，以此类推。
内角和：三角形的内角和总是180度（或者π弧度）。
外角：三角形的每个外角等于与它不相邻的两个内角的和。
中线：连接三角形一边的中点与对面顶点的线段，三条中线在三角形内部相交于一点，称为质心。
高：从三角形的一个顶点垂直于对面边的线段，称为高。三角形有三条高。
面积：三角形的面积可以通过多种方式计算，例如：
- 底和高的乘积的一半：[ $\text{面积} = \frac{1}{2} \times \text{底} \times \text{高}$ ]
- 海伦公式：如果知道三边的长度a、b、c，可以使用：[ $\text{面积} = \sqrt{s(s-a)(s-b)(s-c)}$ ]
  其中，( $s$ ) 是半周长，( $\frac{a+b+c}{2}$ )。
周长：三角形三边长度的总和。
相似三角形：如果两个三角形的对应角相等，且对应边的比例相等，则这两个三角形是相似的。
全等三角形：如果两个三角形的对应角和对应边都相等，则这两个三角形是全等的。
特殊三角形：
- 等边三角形：三边相等，三个角都是60度。
- 等腰三角形：至少有两边相等。
- 直角三角形：有一个角是90度。
- 等腰直角三角形：一个角是90度，且有两边相等。
三角函数：在直角三角形中，三角函数如正弦（sin）、余弦（cos）、正切（tan）等，描述了角和边之间的关系。
重心：三角形三条中线的交点，也是质心。
外心：三角形外接圆的圆心，是三条垂直平分线的交点。
内心：三角形内切圆的圆心，是三条角平分线的交点。
旁心：三角形的每一个顶点到非相邻两边的中垂线的交点，称为旁心。

三角形在几何学中有着广泛的应用，包括在建筑、工程、艺术和物理学等领域。

四、四边形

四边形是具有四条边的平面几何图形。以下是对四边形的详解：

定义：四边形是一个由四条线段首尾相连形成的封闭平面图形。
边和角：四边形有四条边和四个角。边通常用a、b、c、d表示，角用A、B、C、D表示，其中角A是与边a相对的角，以此类推。
内角和：四边形的内角和总是360度（或2π弧度）。
对边平行：在平行四边形中，对边是平行的。
对角线：四边形有两条对角线，它们相交于一点，将四边形分成四个三角形。
面积：四边形的面积可以通过多种方式计算，例如：
- 使用底和高：[ $\text{面积} = \text{底} \times \text{高}$ ]
- 使用对角线和它们之间的夹角：[ $\text{面积} = \frac{1}{2} \times d_1 \times d_2 \times \sin(\theta)$ ]
- 使用向量：如果知道四边形顶点的坐标，可以通过向量叉乘计算面积。
周长：四边形的周长是其四条边长度的总和。
特殊类型的四边形：
- 矩形：所有角都是直角的四边形。
- 正方形：所有边相等且所有角都是直角的四边形。
- 菱形：所有边相等的四边形，但角不一定是直角。
- 平行四边形：对边平行的四边形。
- 梯形：只有一对边平行的四边形。
- 不规则四边形：边长和角度都不相等的四边形。
对称性：某些四边形具有对称性，例如矩形和正方形具有中心对称和轴对称。
相似和全等：如果两个四边形的对应角相等且对应边成比例，则它们是相似的。如果对应角和边都相等，则它们是全等的。
重心：四边形的重心是其所有中线的交点，也是质心。
外接圆和内切圆：四边形的外接圆是所有顶点都位于圆上的圆，内切圆是所有边都与圆相切的圆。
角平分线和中线：四边形的每个角的角平分线相交于一点，每条边的中线也相交于一点。
对角线的性质：在某些特殊的四边形中，对角线具有特定的性质，例如在矩形中，对角线相等且互相平分。

四边形在数学、工程、建筑和艺术等领域有着广泛的应用，其性质和关系是几何学研究的重要内容。

五、圆

圆是几何学中一个非常重要的概念，它具有以下特征和性质：

定义：圆是平面上所有与给定点（圆心）等距离的点的集合。这个距离称为圆的半径。
圆心：圆心是圆的中心点，通常用字母O表示。
半径：半径是从圆心到圆上任意一点的距离，用字母r表示。
直径：直径是穿过圆心的最长弦，其长度是半径的两倍，用字母d表示。
周长：圆的周长，也称为圆周，是圆的边界线的长度。周长C与直径d的关系是：[ $\pi d$ ] 或者 [ $2\pi r$ ]，其中π（圆周率）约等于3.14159。
面积：圆的面积A可以通过半径计算得出：[ $\pi r^2$ ]。
弧：圆上任意两点之间的部分称为弧。弧的长度可以根据半径和弧所对的圆心角来计算。
弦：连接圆上任意两点的线段称为弦。直径是最长的弦。
切线：在圆上某点处与圆相切的直线称为切线。在圆的同一点处，有无数条切线，但只有一条切线与给定的半径垂直。
圆周角：圆周角是顶点在圆周上，两边与圆相交的角。圆周角的度数是其所对弧的度数的一半。
内接角：内接角是顶点在圆内，两边与圆相交的角。内接角的度数等于它所对弧的度数。
外接圆：通过一组点的所有点的圆称为这些点的外接圆。
内切圆：与多边形的所有边都相切的圆称为该多边形的内切圆。
圆的性质：
- 任何两点之间的最短路径是它们之间的直线段，即弦。
- 圆上任意两点之间的距离都大于或等于半径。
- 圆具有旋转对称性，即绕圆心旋转任意角度后，圆的形状不变。
圆的方程：在笛卡尔坐标系中，圆的标准方程是：[ $x - h)^2 + (y - k)^2 = r^2$ ]，其中( $h, k$ )是圆心的坐标， $r$ 是半径。
圆的变换：圆可以通过平移、旋转、缩放等几何变换得到新的圆。

圆在数学、物理学、工程学和艺术设计等领域都有广泛的应用，是研究对称性、运动和变换的基础。

六、图形绘制

编写一个网页程序，绘制几何图形。要求如下：

在页面上依次绘制：三角形、长方形、圆、五边形、椭圆形。
三角形顶角和向上，底边为水平方向。
长方形的长宽比为3:2，水平方向为长，垂直方向为宽。
五边形所有内角小于150度。
每个图形在左上角用文字标注图形的名称和定义。
请使用SVG绘制。每个图形使用独立的画布，大小为宽度为800px，高度为600px。
图形在画布中居中。
画布在页面中从上到下垂直排列，左右居中。
所有代码都写在一个.html文件中。页面中显示中文。代码中添加中文注释。
设计尽量美观的样式，使用暗色调背景。页面元素在网页中合理居中。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>几何图形绘制</title>
    <style>
        /* 页面整体样式 */
        body {
            background-color: #121212;
            /* 暗色调背景 */
            color: white;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 0;
        }

        /* SVG画布容器样式 */
        .canvas-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }

        /* SVG画布样式 */
        svg {
            width: 800px;
            height: 600px;
            background-color: #222222;
            /* 画布背景色 */
            border: 1px solid #444444;
            /* 画布边框 */
        }

        /* 文本样式 */
        text {
            font-size: 20px;
            fill: #dddddd;
            /* 文字颜色 */
            text-anchor: start;
            /* 文字对齐方式 */
        }
    </style>
</head>

<body>
    <h3>几何图形绘制</h3>
    <!-- 创建SVG画布容器 -->
    <div class="canvas-container">
        <!-- 三角形 -->
        <svg viewBox="-400 -300 800 600">
            <!-- 文本描述 -->
            <text x="-380" y="-270">三角形: 由三条线段首尾相连而成的封闭图形。</text>
            <!-- 绘制三角形 -->
            <polygon points="-200,150 200,150 0,-150" fill="#44ff44" stroke="white" stroke-width="2" />
        </svg>
    </div>

    <div class="canvas-container">
        <!-- 长方形 -->
        <svg viewBox="-400 -300 800 600">
            <!-- 文本描述 -->
            <text x="-380" y="-270">长方形: 对边平行且相等的四边形。</text>
            <!-- 绘制长方形 -->
            <rect x="-270" y="-180" width="540" height="360" fill="#4444ff" stroke="white" stroke-width="2" />
        </svg>
    </div>

    <div class="canvas-container">
        <!-- 圆 -->
        <svg viewBox="-400 -300 800 600">
            <!-- 文本描述 -->
            <text x="-380" y="-270">圆: 平面上到定点的距离等于定长的所有点组成的图形。</text>
            <!-- 绘制圆 -->
            <circle cx="0" cy="0" r="200" fill="#ff44ff" stroke="white" stroke-width="2" />
        </svg>
    </div>


    <div class="canvas-container">
        <!-- 椭圆形 -->
        <svg viewBox="-400 -300 800 600">
            <!-- 文本描述 -->
            <text x="-380" y="-270">椭圆形: 平面上到两个焦点距离之和为常数的所有点的集合。</text>
            <!-- 绘制椭圆形 -->
            <ellipse cx="0" cy="0" rx="250" ry="150" fill="#44ffff" stroke="white" stroke-width="2" />
        </svg>
    </div>

    <div class="canvas-container">
        <!-- 五边形 -->
        <svg id="mysvg" viewBox="0 0 800 600">
        </svg>
    </div>
    <br>
    <script>
        var svg = document.getElementById('mysvg');
        var r = 200;  // 正五边形的半径
        var centerX = 400;  // 中心点 x 坐标
        var centerY = 300;  // 中心点 y 坐标

        var points = [];
        for (var i = 0; i < 5; i++) {
            var angle = i * 2 * Math.PI / 5;
            points.push(100 + (centerY + r * Math.sin(angle)));
            points.push(750 - (centerX + r * Math.cos(angle)));
        }

        var polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
        polygon.setAttribute('points', points.join(' '));
        polygon.setAttribute("fill", "yellow");
        polygon.setAttribute("stroke", "white");
        polygon.setAttribute("stroke-width", "2");
        svg.appendChild(polygon);

        // 标注点的坐标值
        var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
        label.textContent = "五边形: 五条边的多边形。";
        label.setAttribute("x", 20);
        label.setAttribute("y", 50); // 调整Y轴的位置
        label.setAttribute("font-size", "20px"); // 设置字体大小
        label.setAttribute("fill", "white");
        svg.appendChild(label);
    </script>
</body>

</html>