计算机图形学探索之旅

LeonGao
154 阅读4分钟

一、初入图形世界

小明是一名对编程充满热情的新手，偶然间看到了炫酷的 3D 游戏画面和精美的数字艺术作品，对背后的计算机图形学产生了浓厚兴趣。他决定深入探索这个奇妙的领域。

首先，他打开了编辑器，创建了一个 HTML 文件，并引入 JavaScript 代码开始他的图形之旅。在 JavaScript 中，我们可以使用canvas元素来绘制图形。通过获取canvas的上下文，就能开始绘制操作了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算机图形学入门</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
  </script>
</body>
</html>

二、绘制基础图形

小明知道，图形的基础是点、线、面。他决定先从绘制一条简单的直线开始。在2d绘图上下文中，使用beginPath()方法开始一个新路径，moveTo(x,y)方法将画笔移动到指定坐标，lineTo(x,y)方法绘制一条从当前位置到指定坐标的直线，最后用stroke()方法将路径描边显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算机图形学入门</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(300, 300);
    ctx.stroke();
  </script>
</body>
</html>

看着屏幕上出现的直线，小明兴奋不已。接着，他又尝试绘制矩形。rect(x,y,width,height)方法可以方便地绘制一个矩形，同样需要用stroke()方法描边，或者用fill()方法填充颜色。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算机图形学入门</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.rect(100, 100, 200, 150);
    ctx.fillStyle ='skyblue';
    ctx.fill();
  </script>
</body>
</html>

三、图形变换

掌握了基础图形绘制后，小明开始探索图形变换。图形变换主要有平移、旋转和缩放。

平移可以通过translate(x,y)方法实现，它会将后续绘制的图形在水平和垂直方向上移动指定的距离。例如，先绘制一个矩形，然后进行平移再绘制另一个矩形，就能看到平移的效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算机图形学入门</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.rect(50, 50, 100, 80);
    ctx.fillStyle = 'lightcoral';
    ctx.fill();
    ctx.translate(150, 0);
    ctx.beginPath();
    ctx.rect(50, 50, 100, 80);
    ctx.fillStyle = 'lightgreen';
    ctx.fill();
  </script>
</body>
</html>

旋转使用rotate(angle)方法，其中angle是旋转的角度，单位是弧度。要将角度转换为弧度，可以使用公式：弧度 = 角度 × (Math.PI/ 180) 。比如让一个圆形旋转起来。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算机图形学入门</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(200, 200, 50, 0, 2 * Math.PI);
    ctx.fillStyle = 'yellow';
    ctx.fill();
    ctx.translate(200, 200);
    ctx.rotate((45 * Math.PI) / 180);
    ctx.beginPath();
    ctx.arc(0, 0, 50, 0, 2 * Math.PI);
    ctx.fillStyle = 'orange';
    ctx.fill();
  </script>
</body>
</html>

缩放则通过scale(x,y)方法，x和y分别是水平和垂直方向的缩放比例。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算机图形学入门</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.rect(100, 100, 100, 80);
    ctx.fillStyle = 'lightblue';
    ctx.fill();
    ctx.scale(1.5, 1.5);
    ctx.beginPath();
    ctx.rect(100, 100, 100, 80);
    ctx.fillStyle = 'pink';
    ctx.fill();
  </script>
</body>
</html>

四、色彩与渐变

小明觉得单色图形有些单调，他想给图形加上丰富的色彩和渐变效果。在 JavaScript 中，设置fillStyle或strokeStyle可以改变图形的填充或描边颜色，可以使用颜色名称、十六进制值或者 RGB、RGBA 值来指定颜色。

而渐变分为线性渐变和径向渐变。线性渐变使用createLinearGradient(x0,y0,x1,y1)方法创建，x0,y0是渐变起始点坐标，x1,y1是渐变结束点坐标，然后通过addColorStop(position, color)方法添加颜色节点。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算机图形学入门</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    const gradient = ctx.createLinearGradient(0, 0, 400, 400);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(0.5, 'yellow');
    gradient.addColorStop(1, 'blue');
    ctx.beginPath();
    ctx.rect(0, 0, 400, 400);
    ctx.fillStyle = gradient;
    ctx.fill();
  </script>
</body>
</html>

径向渐变使用createRadialGradient(x0,y0,r0,x1,y1,r1)方法创建，x0,y0,r0是起始圆的圆心坐标和半径，x1,y1,r1是结束圆的圆心坐标和半径。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算机图形学入门</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    const gradient = ctx.createRadialGradient(200, 200, 20, 200, 200, 180);
    gradient.addColorStop(0, 'white');
    gradient.addColorStop(1, 'purple');
    ctx.beginPath();
    ctx.arc(200, 200, 180, 0, 2 * Math.PI);
    ctx.fillStyle = gradient;
    ctx.fill();
  </script>
</body>
</html>

五、未来的挑战

通过一天的学习和实践，小明在计算机图形学的世界里迈出了坚实的一步。但他知道，这只是冰山一角。后面还有复杂的 3D 图形建模、光照计算、纹理映射等更高级的知识等待着他去探索。他充满期待，准备迎接新的挑战，继续在计算机图形学的奇妙世界中遨游。

以上文章涵盖了计算机图形学基础入门知识。你对文章内容、讲解深度是否满意？若有更具体需求，可随时和我说。

avatar
文章
阅读
粉丝