计算机图形学的奇幻之旅：第三天探索

嘿，勇敢的图形探险家们！欢迎来到计算机图形学奇妙世界的第三天。前两日，我们像是在图形森林里摸索着前进，搭建基础营地，今天，咱们要开始真正的冒险，解锁更炫酷的图形魔法啦！

一、像素的秘密花园：深入理解色彩与显示

想象计算机屏幕是一块超级大的像素拼图板，每个像素都是一个小小的彩色魔法方块。在底层，这些像素其实是由红（Red）、绿（Green）、蓝（Blue）三种颜色的小灯组成的，这就是大名鼎鼎的 RGB 色彩模式。就好比你在调配魔法药水，红色小灯、绿色小灯和蓝色小灯的亮度不同，混合出来的颜色就千变万化。

在 JavaScript 中，我们可以通过canvas来操控这些像素小方块。首先，创建一个canvas画布：

ini 复制代码

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

这就像是我们在屏幕上铺开了一张空白的魔法画布，准备开始绘制属于我们的图形魔法。

二、形状大变身：绘制复杂图形

（一）路径的魔法轨迹

绘制复杂图形，我们需要掌握路径这个魔法技能。路径就像是图形的隐形骨架，我们可以沿着这个骨架绘制出各种形状。在 JavaScript 中，使用beginPath()开启一条新路径，moveTo(x, y)将画笔移动到指定坐标，lineTo(x, y)绘制线条。

比如，我们要绘制一个三角形：

ini 复制代码

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(150, 200);
ctx.closePath();
ctx.stroke();

这里，closePath()就像是给路径画了一个完美的句号，让起点和终点连接起来，stroke()则是拿起魔法笔，沿着路径勾勒出形状。

（二）图形的填充魔法

仅仅勾勒出形状可不够，我们还得给图形填充上绚丽的色彩。使用fillStyle属性设置填充颜色，fill()方法完成填充。

ini 复制代码

ctx.beginPath();
ctx.arc(150, 150, 50, 0, 2 * Math.PI);
ctx.fillStyle ='skyblue';
ctx.fill();

上面这段代码绘制了一个蓝色的圆形，arc()方法就像是在施展画圆的魔法咒语，设定圆心坐标、半径以及起始和结束角度，fillStyle赋予图形天空般的蓝色，fill()让色彩填满整个圆形。

三、动画的奇幻魔法：让图形动起来

在计算机图形学的世界里，动画就像是给图形注入了生命。实现动画的关键在于不断更新画面，利用视觉暂留原理，让图形看起来像是在动。在 JavaScript 中，我们可以使用requestAnimationFrame函数来实现流畅的动画效果。

scss 复制代码

function animate() {
    // 在这里更新图形的位置、大小等属性
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 绘制新的图形
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

clearRect()就像是用魔法橡皮擦把画布擦干净，然后我们在空白画布上绘制新的图形，requestAnimationFrame会不断调用animate函数，让图形持续更新，从而实现动画效果。比如，我们可以让一个小球在画布上跳动：

ini 复制代码

let x = 50;
let y = 50;
let vx = 2;
let vy = 2;
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, 2 * Math.PI);
    ctx.fillStyle ='red';
    ctx.fill();
    x += vx;
    y += vy;
    if (x > canvas.width - 10 || x < 10) {
        vx = -vx;
    }
    if (y > canvas.height - 10 || y < 10) {
        vy = -vy;
    }
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

这样，小球就会在画布上弹来弹去，是不是很有趣？

今天的计算机图形学冒险之旅就到这里啦！我们探索了像素的秘密、绘制了复杂图形，还让图形动了起来。但这只是图形魔法世界的冰山一角，还有更多奇妙的知识等待我们去发现。明天，我们将继续深入探索，解锁更强大的图形技能！

上述内容从多方面展示了计算机图形学第三天的知识要点。若你觉得某些部分需要调整，或想补充其他内容，欢迎随时和我说。