青少年编程与数学 01-005 超文本标记语言（HTML）15课题、绘图2

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

青少年编程与数学 01-005 超文本标记语言（HTML）15课题、绘图2_2

四、HTML5 SVG
五、SVG 与 Canvas两者间的区别
六、HTML5 SVG练习
课题建议
课题作业
附录一、腾讯公司简介

本文介绍网页中的图形绘制方法。

四、HTML5 SVG

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，用于描述二维图形和图形应用。HTML5 支持直接在 HTML 文档中嵌入 SVG 图形，无需额外的插件。与位图图像不同，SVG 图形在放大时不会失真，因为它们是以数学描述的形状来定义的，而不是像素点阵。

基本的 SVG 元素

<svg> 标签 - 定义 SVG 图纸的根元素。属性 width 和 height 控制图纸的大小。
形状元素 - 包括 <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon> 等。
路径元素 (<path>) - 用于创建任意形状。d 属性包含一系列的命令和坐标来绘制路径。
文本元素 (<text>) - 用于在 SVG 中添加文本。
群组元素 (<g>) - 用于将多个图形元素组合在一起，可以对整个群组应用变换和样式。

示例

下面是一个简单的 SVG 例子，绘制了一个红色的矩形和一个蓝色的圆形：

<svg width="200" height="200">
    <rect x="10" y="10" width="50" height="50" style="fill:red;" />
    <circle cx="100" cy="100" r="50" style="fill:blue;" />
</svg>

SVG 与 CSS

SVG 图形可以使用 CSS 进行样式化，包括颜色、渐变、阴影等效果。例如：

<svg width="200" height="200">
    <rect x="10" y="10" width="50" height="50" fill="red" />
    <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

<style>
    rect {
        fill: orange;
        stroke: black;
        stroke-width: 3;
    }

    circle {
        fill: green;
        stroke: purple;
        stroke-width: 5;
    }
</style>

动画

SVG 支持内置动画，可以使用 <animate> 或 <animateTransform> 元素来添加动画效果。例如，使圆形沿着 X 轴移动：

<svg width="200" height="200">
    <circle cx="100" cy="100" r="50" fill="blue">
        <animate attributeName="cx" from="100" to="150" dur="2s" repeatCount="indefinite" />
    </circle>
</svg>

优点

可伸缩性：SVG 图形可以无损地缩放到任何尺寸。
可搜索性：由于 SVG 是基于文本的，所以可以通过搜索引擎搜索 SVG 文件中的文本。
交互性：可以利用 JavaScript 和 CSS 对 SVG 图形进行动态控制和交互。
可压缩性：相对于位图图像，SVG 文件往往更小，尤其是在图形复杂度较高的情况下。

缺点

浏览器兼容性：虽然现代浏览器都支持 SVG，但是一些较旧的浏览器可能不支持某些 SVG 特性。
渲染性能：对于非常复杂的图形，SVG 的渲染可能会比位图图像慢。

五、SVG 与 Canvas两者间的区别

SVG（Scalable Vector Graphics）和Canvas是两种不同的技术，它们都可以用于在网页上绘制图形，但它们的工作方式和适用场景有很大的差异。以下是SVG和Canvas之间的一些主要区别：

SVG

矢量图形：SVG使用XML描述矢量图形，这意味着图形是由线条和曲线构成的，可以无限制地缩放而不失真。
基于DOM：SVG图形是基于DOM的，每个图形元素都是DOM树的一部分，可以单独选择和修改。
事件处理：SVG元素可以附加JavaScript事件处理器，允许与图形进行交互。
文本渲染：SVG中的文本是作为图形元素处理的，因此可以很好地控制字体和布局。
保存格式：SVG图形本身就可以作为一种文件格式，不需要转换为位图格式。
适用于：SVG适合于有大量静态图形的场景，如图标、图表、地图和界面元素，特别是当图形需要交互和动画时。

Canvas

位图渲染：Canvas使用JavaScript API在一块固定大小的画布上绘制像素，适用于动态生成和频繁更新的图像。
非DOM元素：Canvas上的图形不作为DOM元素存在，它们是画布上的一系列像素。
事件处理：Canvas本身不支持事件处理器，但可以通过画布元素的事件监听器来检测用户输入。
文本渲染：Canvas的文本渲染能力相对有限，不如SVG强大。
保存格式：Canvas可以导出为位图格式，如PNG或JPEG。
适用于：Canvas适合于需要高性能实时渲染的场景，如游戏、数据可视化和复杂动画。

性能考虑

SVG在处理简单或中等复杂度的图形时表现良好，但在图形数量极大或非常复杂的情况下，其渲染性能可能会下降。
Canvas在处理大量动态数据和高频率的重绘时更高效，因为它直接操作像素，避免了DOM操作的开销。

代码示例

SVG示例：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Canvas示例：

<canvas id="myCanvas" width="100" height="100"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(50, 50, 40, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 3;
  ctx.stroke();
</script>

总之，选择SVG还是Canvas取决于具体的应用需求，如图形的类型、是否需要交互、性能要求以及图形的复杂程度。

六、HTML5 SVG练习

<!DOCTYPE html>
<html lang="zh-cn">
    <title>HTML Canvas</title>
    <meta charset="utf-8" />
    <style>
        body {
            color: cyan;
            background-color: teal;
        }
        .container {
            width: 800px; /* 设置容器的宽度 */
            margin: 0 auto; /* 将左右边距设置为自动 */
            line-height: 2;
        }
    </style>
    <body>
        <div class="container">
            <h1>这是一个SVG画的椭圆</h1>
            <svg height="300" width="800">
                <ellipse
                    cx="200"
                    cy="130"
                    rx="200"
                    ry="100"
                    style="fill: yellow; stroke: purple; stroke-width: 2"
                />
            </svg>
        </div>
    </body>
</html>