---
title: 新学期第一课《计算机图形学》报告
abbrlink: 6750e8fe
date: "2025-09-01 18:38:46"
updated: "2025-09-01 19:53:40"
desc: 在现代计算机中，显示图形的地方有很多，在各个平台和语言中，我选择了较为广泛使用的 Canvas 作为实验平台。Canvas 是 HTML5 中的一个元素，允许在网页中动态绘制图形。相比于传统的图形绘制方式，Canvas 具有更好的灵活性和易用性，非常适合在浏览器环境下进行图形编程。
categories:
    - 计算机图形学
tags:
    - 计算机图形学
    - canvas
    - javascript
cover: https://i.ibb.co/7xYjSLyY/2025-09-01-18-41-01.png
---

## 平台/语言介绍

在现代计算机中，显示图形的地方有很多，在各个平台和语言中，我选择了较为广泛使用的 **Canvas** 作为实验平台。**Canvas** 是 **HTML5** 中的一个元素，允许在网页中动态绘制图形。相比于传统的图形绘制方式，**Canvas** 具有更好的灵活性和易用性，非常适合在浏览器环境下进行图形编程。

**JavaScript** 作为一种*动态类型*的脚本语言，具有灵活性和易于学习的特点，同时，它的语法与 **C/C++** 有很大相似性，便于上手理解。浏览器环境提供了便捷的开发条件，无需安装复杂的开发工具，只要有浏览器就能开始编程。

**Canvas 2D API** 提供了丰富的绘图功能，包括路径绘制、填充、描边、几何变换等。它的坐标系统以左上角为原点，x轴向右，y轴向下，这种设计直观易懂。

这个平台组合让我能够快速上手图形编程，同时又能深入学习计算机图形学的核心概念。

## Canvas历史

**Canvas**的历史可以追溯到`2004年`，当时苹果公司的Safari浏览器团队为了开发一个在线绘图应用，引入了**Canvas**元素。这个想法来自于Mac OS X的绘图API，他们希望在网页中也能实现类似的动态绘图功能。

起初，**Canvas**只是Safari浏览器的私有功能，主要用于苹果的Dashboard小部件。但很快，其他浏览器厂商看到了它的潜力。`2005年`，Mozilla的Firefox浏览器开始支持**Canvas**，紧接着Opera和Google的Chrome也跟进支持。

`2008年`，**Canvas**正式成为**HTML5**规范的一部分，这是一个重要的里程碑。从此，**Canvas**不再是某个浏览器的专有技术，而是Web标准的组成部分。**W3C**（万维网联盟）开始制定**Canvas**的详细规范，确保所有浏览器都能一致地实现这个API。

在随后的几年里，**Canvas**不断发展和完善。`2009年`，**Canvas 2D Context**规范正式发布，定义了路径绘制、填充、变换等核心功能。`2011年`，**WebGL**的引入让**Canvas**支持3D图形渲染，这大大扩展了**Canvas**的应用范围。

如今，**Canvas**已经成为Web开发中不可或缺的一部分，广泛应用于游戏开发、数据可视化、图像处理、动画制作等领域。它的出现让网页不再局限于静态内容，而是能够实现丰富的交互式图形应用。

## 小试牛刀，尝试绘制一个三角形

源代码

```html title="绘制三角形.html"
<!-- 规定图像区域 -->
<canvas id="canvas" width="400" height="400"></canvas>
<script>
    // 获取Canvas元素对象，用于后续绘制操作
    const canvas = document.getElementById("canvas");
    // 获取2D渲染上下文，这是Canvas的绘图接口，支持路径、填充等操作
    const ctx = canvas.getContext("2d");
    // 开始一个新的路径，确保之前的绘制不会干扰
    ctx.beginPath();
    // 将画笔移动到指定坐标（x=200, y=50），这是三角形的顶点。Canvas坐标系以左上角为原点，x向右增加，y向下增加
    ctx.moveTo(200, 50); // 顶点
    // 从当前点绘制直线到左下角（x=100, y=350），这是三角形的左下顶点
    ctx.lineTo(100, 350); // 左下角
    // 从当前点绘制直线到右下角（x=300, y=350），这是三角形的右下顶点
    ctx.lineTo(300, 350); // 右下角
    // 闭合路径，将最后一个点连接回起点，形成封闭的三角形形状
    ctx.closePath(); // 闭合路径
    // 设置填充颜色为蓝色，这将用于填充路径内部区域
    ctx.fillStyle = "blue"; // 设置填充颜色
    // 执行填充操作，将路径内部用指定颜色填充，实现三角形的可视化
    ctx.fill(); // 填充三角形
</script>
```

<!-- 规定图像区域 -->

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

<script>
// 获取Canvas元素对象，用于后续绘制操作
const canvas = document.getElementById('canvas');
// 获取2D渲染上下文，这是Canvas的绘图接口，支持路径、填充等操作
const ctx = canvas.getContext('2d');
// 开始一个新的路径，确保之前的绘制不会干扰
ctx.beginPath();
// 将画笔移动到指定坐标（x=200, y=50），这是三角形的顶点。Canvas坐标系以左上角为原点，x向右增加，y向下增加
ctx.moveTo(200, 50);  // 顶点
// 从当前点绘制直线到左下角（x=100, y=350），这是三角形的左下顶点
ctx.lineTo(100, 350); // 左下角
// 从当前点绘制直线到右下角（x=300, y=350），这是三角形的右下顶点
ctx.lineTo(300, 350); // 右下角
// 闭合路径，将最后一个点连接回起点，形成封闭的三角形形状
ctx.closePath();      // 闭合路径
// 设置填充颜色为蓝色，这将用于填充路径内部区域
ctx.fillStyle = 'blue'; // 设置填充颜色
// 执行填充操作，将路径内部用指定颜色填充，实现三角形的可视化
ctx.fill();           // 填充三角形
</script>

---

## 补充|题外话

![作业要求图片](https://i.ibb.co/7xYjSLyY/2025-09-01-18-41-01.png)
上述内容是我提交的作业报告，但是老师的ppt上还有许多内容非常有趣，在此进行补充

---

### 计算机视觉女神

![lenna原图](https://i.ibb.co/S7tLTcZQ/218d3afb146cd9e6cf66967b7c0fd1e4.png)

**Lena的故事**：`1972年`，一位名叫**Lena Söderberg**的瑞典模特为《花花公子》杂志拍摄了一张经典照片。没想到的是，这张照片的一个裁剪版本（只包含头部和肩膀）成为了*计算机图形学*和*图像处理*领域最著名的测试图像。

> 根据她提议，《花花公子》的编辑们在她的名字里多加了一个“n”，写作“Lenna”，为了让英语读者更准确地发音（避免读作 “Lee-na”）

原文網址：https://kknews.cc/history/b56m5yn.html
故事的起源要追溯到`1980年代`。当时，南加州大学的两位研究人员**Alexander Sawchuk**和他的学生需要一张高质量的测试图像。他们从一本`1972年`的《花花公子》杂志上扫描了这张照片，并将其用于*图像压缩算法*的研究。

有趣的是，**Lena**本人直到`2001年`才知道自己的照片被用于学术研究。当她得知这个消息时，她感到非常的惊奇与兴奋

这个 _意外_ 的选择背后有着深刻的原因：首先，这张照片包含了丰富的视觉特征——细节、平坦区域、阴影和纹理，非常适合测试各种*图像处理算法*；~~其次，研究者们（主要是男性）自然会被这张美丽女性的照片所吸引~~。

几十年来，**Lena**图像已经成为*数字图像处理*领域的经典测试图像，被广泛用于算法验证、论文发表和教科书示例。她的故事也成为了计算机科学史上的一个有趣的插曲，提醒我们技术发展有时会以意想不到的方式与流行文化产生交集。但是 **曲尽人散终有时**

**IEEE计算机协会宣布从2024年4月1日起不再接受包含Lenna图的论文，原因是尊重照片主人的意愿并维护开放包容文化**

一代女神就此落幕
![Lena重拍图，展现当年风采](https://i.ibb.co/Y7rnt58Y/2025-09-01-19-20-24.png)

> 瑞典模特莱娜·瑟德贝里（Lena Soderberg，婚后名Lena Forsén）应美国《WIRED》杂志邀请，在瑞典重新拍摄了与其1972年《花花公子》杂志原片相同姿势的照片，以反映时代变迁和技术发展。

## 参考

- **东北大学计算机图形学 Computer Graphics ppt课件**

- [为什么Lena的那张图会成为数字图像处理的标准图？](https://www.zhihu.com/question/21748279/answer/19370678)

- [图像处理标准图像——“Lena图”的由来](https://blog.51cto.com/u_15468736/5529437)


---

**作者：**xingwangzhe

**本文链接：**[https://xingwangzhe.fun/posts/6750e8fe/](https://xingwangzhe.fun/posts/6750e8fe/)

本文采用[知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议](https://creativecommons.org/licenses/by-nc-sa/4.0/)进行许可。