JavaScript 中的计算机图形学核心知识点详解

计算机图形学是研究如何利用计算机来生成、处理和显示图形的学科。它在游戏开发、数据可视化、虚拟现实等领域有着广泛应用。在 Web 开发中，借助 JavaScript 与 HTML5 的元素，我们可以轻松实现各种图形效果。下面将深入讲解计算机图形学的核心知识点，并结合 JavaScript 代码进行实践。

一、图形绘制基础

1. 元素简介

是 HTML5 提供的一个用于绘制图形的画布元素。在 HTML 中创建一个元素：

js 复制代码

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

在 JavaScript 中获取该元素并获取绘图上下文：

js 复制代码

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

通过ctx对象，我们可以调用各种绘图方法。

2. 基本图形绘制

直线绘制

使用beginPath()开始一个新路径，moveTo(x,y)移动画笔到指定坐标，lineTo(x,y)绘制直线，最后用stroke()描边。

js 复制代码

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 150);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.stroke();

矩形绘制

fillRect(x,y,width,height)用于填充矩形，strokeRect(x,y,width,height)用于绘制矩形边框。

js 复制代码

ctx.fillRect(200, 100, 80, 50);
ctx.strokeRect(200, 100, 80, 50);

圆形绘制

arc(x,y,radius,startAngle,endAngle,counterclockwise)绘制圆弧，通过设置合适的参数可以绘制圆形。startAngle和endAngle以弧度为单位，counterclockwise为true时逆时针绘制。

js 复制代码

ctx.beginPath();
ctx.arc(300, 200, 30, 0, 2 * Math.PI);
ctx.fillStyle ='red';
ctx.fill();

二、图形变换

图形变换包括平移、旋转、缩放和倾斜，通过变换矩阵实现。在 2D 绘图中，ctx.transform(a,b,c,d,e,f)方法可以进行综合变换，也有更便捷的单独变换方法。

1. 平移

ctx.translate(x,y)将坐标原点平移到指定位置，后续绘制都基于新的原点。

js 复制代码

ctx.translate(100, 100);
ctx.fillRect(0, 0, 50, 50);

2. 旋转

ctx.rotate(angle)按指定弧度旋转图形。

js 复制代码

ctx.translate(200, 200);
ctx.rotate(Math.PI / 4);
ctx.fillRect(-25, -25, 50, 50);

3. 缩放

ctx.scale(x,y)分别在 x 轴和 y 轴方向进行缩放。

js 复制代码

ctx.scale(2, 0.5);
ctx.fillRect(50, 50, 50, 50);

三、图形渲染与优化

1. 颜色与渐变

纯色填充：通过fillStyle和strokeStyle设置填充色和描边色，颜色可以用十六进制、RGB、RGBA 等格式表示。

线性渐变：createLinearGradient(x0,y0,x1,y1)创建线性渐变对象，通过addColorStop(offset, color)添加颜色节点。

js 复制代码

const gradient = ctx.createLinearGradient(0, 0, 100, 100);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(1,'red');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 100, 100);

径向渐变：createRadialGradient(x0,y0,r0,x1,y1,r1)创建径向渐变对象。

2. 图像合成

globalCompositeOperation属性控制新绘制图形与已有图形的合成方式，比如source-over（默认，新图形覆盖旧图形）、destination-over（旧图形覆盖新图形）等。

js 复制代码

ctx.globalCompositeOperation = 'destination-over';
ctx.fillRect(50, 50, 100, 100);
ctx.fillStyle = 'blue';
ctx.fillRect(75, 75, 100, 100);

3. 性能优化

减少重绘和回流：批量修改图形属性，避免频繁操作绘图上下文。

使用离屏画布（OffscreenCanvas） ：在 Web Workers 中使用，进行后台图形处理，不影响主线程性能。

四、进阶应用：动画与交互

1. 动画实现

通过requestAnimationFrame()方法实现动画，它会在浏览器下次重绘之前调用指定的函数。

js 复制代码

let x = 0;
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(x, 100, 50, 50);
    x += 1;
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

2. 交互处理

通过监听鼠标事件实现图形交互，比如点击、拖动等。

js 复制代码

canvas.addEventListener('mousedown', (e) => {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, 2 * Math.PI);
    ctx.fillStyle = 'green';
    ctx.fill();
});

以上就是计算机图形学在 JavaScript 中的核心知识点与实践内容。通过不断练习和探索，你可以创造出更复杂、精美的图形效果和交互应用。

上述内容涵盖了计算机图形学从基础到进阶的知识。若你想了解某个特定部分的拓展内容，或尝试其他图形效果，欢迎随时和我说。