新学期第一课《计算机图形学》报告

平台/语言介绍

在现代计算机中，显示图形的地方有很多，在各个平台和语言中，我选择了较为广泛使用的 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开发中不可或缺的一部分，广泛应用于游戏开发、数据可视化、图像处理、动画制作等领域。它的出现让网页不再局限于静态内容，而是能够实现丰富的交互式图形应用。

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

源代码

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

补充|题外话

上述内容是我提交的作业报告，但是老师的ppt上还有许多内容非常有趣，在此进行补充

计算机视觉女神

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 Soderberg，婚后名Lena Forsén）应美国《WIRED》杂志邀请，在瑞典重新拍摄了与其1972年《花花公子》杂志原片相同姿势的照片，以反映时代变迁和技术发展。

参考

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

• 为什么Lena的那张图会成为数字图像处理的标准图？

• 图像处理标准图像——“Lena图”的由来