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

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

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

课题摘要
课题要求
一、网页绘图
二、什么是 HTML Canvas？
三、HTML Canvas练习

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

“在网页设计中，每一点像素都很重要。”
“In web design, every pixel counts.”
—— 雅各布·尼尔森 (Jakob Nielsen) | 丹麦-美国用户体验专家 | 1953 ~

“网页不仅仅是一种视觉媒体，它是一种交互式媒体。”
“The web is not just a visual medium, it’s an interactive medium.”
—— 杰夫·贝索斯 (Jeff Bezos) | 美国企业家，亚马逊创始人 | 1964 ~

课题摘要

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

课题要求

理解在网页中绘图的必要性。
掌握在网页中绘图的基本方法。

一、网页绘图

在网页中实现绘图，主要有两种常用的技术：SVG（可缩放矢量图形）和 HTML5 的 Canvas API。这两种方法各有优势，可以根据具体需求选择使用。

SVG (Scalable Vector Graphics)

SVG 是一种基于 XML 的矢量图形格式，可以直接在 HTML 文档中嵌入。它的优点在于图形质量不会因为放大而降低，并且可以利用 CSS 和 JavaScript 进行动画和交互控制。

如何使用 SVG 绘图：

直接在 HTML 中编写 SVG 代码：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red"/>
</svg>

使用 JavaScript 动态生成 SVG 元素：

var svgNS = "http://www.w3.org/2000/svg";
var rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('x', 10);
rect.setAttribute('y', 10);
rect.setAttribute('width', 80);
rect.setAttribute('height', 80);
rect.setAttribute('fill', 'red');
document.querySelector('body').appendChild(rect);

Canvas

Canvas 是 HTML5 引入的一种在网页上绘制图形的方法，它提供了一个矩形区域，你可以使用 JavaScript 来控制这个区域并绘制图形。

如何使用 Canvas 绘图：

在 HTML 中添加 Canvas 元素：

<canvas id="myCanvas" width="500" height="500"></canvas>

使用 JavaScript 获取 Canvas 上下文并绘制图形：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 绘制一个红色的矩形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 80, 80);

// 绘制一个蓝色的圆圈
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
ctx.fillStyle = 'blue';
ctx.fill();

除了基本的绘图功能，Canvas 还可以用于复杂的图形操作、动画、游戏开发等。

其他绘图技术

除了 SVG 和 Canvas，还有其他一些库和技术可以用来在网页中绘图，如：

D3.js：一个强大的数据可视化库，基于 SVG。
Three.js：用于创建和展示 3D 图形的库。
Chart.js：用于生成统计图表的库，可以创建折线图、饼状图等。

每种技术都有其特点和适用场景，选择哪种取决于你的具体需求和项目复杂度。如果你需要简单的矢量图形，SVG 可能是更好的选择；如果你需要动态生成图形或复杂的图形处理，Canvas 或者相关库可能是更合适的方案。

Canvas画布，就是可以用来画画的地方，不是用户在浏览器上画图，而是会javascript画图。这区别于直接载入一张图片，是可以根据需要进行绘制。

二、什么是 HTML Canvas？

HTML5 的 <canvas> 元素提供了在网页上进行实时图形渲染的能力。<canvas> 本身只是一个容器，实际的绘图工作是由 JavaScript 通过 canvas 提供的 API 来完成的。以下是使用 <canvas> 的基本步骤：

在 HTML 中添加 <canvas> 元素：

<canvas id="myCanvas" width="500" height="400"></canvas>

使用 JavaScript 获取 canvas 上下文：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 通常使用 2d 渲染上下文

开始绘图：
使用 ctx 对象提供的方法进行绘图。例如，绘制一个矩形：

ctx.fillStyle = 'red'; // 设置填充色
ctx.fillRect(10, 10, 150, 75); // 绘制一个填充矩形

绘制路径：
你可以绘制路径，然后填充或描边它们：

ctx.beginPath(); // 开始一条新的路径
ctx.moveTo(75, 50); // 移动到起始点
ctx.lineTo(100, 75); // 绘制一条线到下一个点
ctx.lineTo(100, 25); // 再绘制一条线
ctx.closePath(); // 关闭路径
ctx.stroke(); // 描边路径

保存和恢复状态：
你可以保存当前的绘图状态，然后恢复到之前的状态，这对于复杂的绘图很有用：

ctx.save(); // 保存当前状态
ctx.translate(100, 100); // 平移绘图上下文
// 绘图...
ctx.restore(); // 恢复到保存的状态

变换矩阵：
使用变换矩阵可以实现平移、旋转、缩放等操作：

ctx.scale(2, 2); // 缩放
ctx.rotate(Math.PI / 4); // 旋转
ctx.translate(50, 50); // 平移

文字：
你还可以在 canvas 上绘制文字：

ctx.font = '30px Arial'; // 设置字体样式
ctx.fillText('Hello World', 10, 50); // 绘制文本

图像：
你也可以在 canvas 上绘制图像：

const img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {
    ctx.drawImage(img, 0, 0); // 绘制图像
};

动画：
使用 requestAnimationFrame 可以创建动画：

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
    // 绘图代码...
    requestAnimationFrame(draw); // 请求下一帧
}
draw();

<canvas> 的强大之处在于它提供了丰富的绘图能力，从简单的图形到复杂的游戏和数据可视化都能实现。然而，它也有一定的学习曲线，需要理解坐标系统、变换、颜色模式等概念。

三、HTML Canvas练习

<!DOCTYPE html>
<html lang="zh-cn">
    <title>HTML Canvas</title>
    <meta charset="utf-8" />
    <style>
        body {
            color: cyan;
            background-color: teal;
        }
        .container {
            width: 500px; /* 设置容器的宽度 */
            margin: 0 auto; /* 将左右边距设置为自动 */
            line-height: 2;
        }
    </style>
    <body>
        <div class="container">
            <h1>这是一个 canvas</h1>
            <canvas
                id="myCanvas"
                width="500"
                height="500"
                style="border: 1px solid #000000"
            ></canvas>
        </div>
        <script>
            const canvas = document.getElementById("myCanvas");
            const ctx = canvas.getContext("2d");
            ctx.beginPath();
            ctx.rect(100, 100, 300, 300);
            ctx.stroke();
            ctx.fillStyle = "#00FF00";
            ctx.fillRect(150, 150, 200, 200);
        </script>
    </body>
</html>