在数字世界的某个角落，有一个神秘的 “像素小镇”。这个小镇里的每一块砖、每一扇窗，甚至天上的每一颗星星，都是由一个个小方块 —— 像素组成的。今天，我们就来当一回小镇的建筑师，用计算机图形学的魔法，在屏幕上建造属于我们的像素小镇！
初识像素：小镇的基石
想象一下，像素就是小镇里最小的彩色砖块。计算机屏幕上的所有画面，从精美的游戏场景到酷炫的动画，都是由这些小砖块排列组合而成的。在计算机图形学里，我们可以把屏幕看作一个巨大的网格，每个网格就是一个像素，它有自己的位置（坐标）和颜色。
比如，我们要在屏幕上画一个红色的点，其实就是找到对应的网格，然后把这个网格涂成红色。在 JavaScript 中，我们可以使用 HTML5 的 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');
// 找到坐标(100, 100)的像素，把它涂成红色
ctx.fillStyle ='red';
ctx.fillRect(100, 100, 1, 1);
</script>
</body>
</html>
在这段代码中，ctx.fillRect(100, 100, 1, 1) 表示在坐标 (100, 100) 的位置，绘制一个宽和高都为 1 的矩形，也就是一个像素。ctx.fillStyle ='red' 则是设置这个像素的颜色为红色。
绘制线条：小镇的街道
有了像素，我们就可以开始建造小镇的街道了。街道其实就是由一连串的像素点连接而成的线条。在计算机图形学中，绘制线条的方法有很多，我们这里用一种简单的方式：把相邻的像素点依次连接起来。
<!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); // 起点坐标(50, 50)
ctx.lineTo(300, 50); // 终点坐标(300, 50)
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;
ctx.stroke();
</script>
</body>
</html>
在这段代码里，ctx.moveTo(50, 50) 是把画笔移动到起点 (50, 50) ，ctx.lineTo(300, 50) 是从起点画一条线到终点 (300, 50) ，ctx.stroke() 则是把这条线绘制出来。ctx.strokeStyle = 'black' 设置线条颜色为黑色，ctx.lineWidth = 5 设置线条的宽度为 5 个像素。
绘制形状：小镇的房屋
有了街道，我们该给小镇加上房屋了。房屋可以由各种形状组成，比如矩形、三角形。以绘制一个简单的矩形房屋为例：
<!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.fillStyle = 'brown';
ctx.fillRect(100, 200, 150, 100); // 房屋主体
ctx.fillStyle = 'orange';
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(225, 150);
ctx.lineTo(350, 200);
ctx.fill(); // 填充三角形屋顶
</script>
</body>
</html>
这里先用 ctx.fillRect(100, 200, 150, 100) 绘制了房屋的主体矩形，然后通过 ctx.moveTo、ctx.lineTo 和 ctx.fill 绘制并填充了三角形的屋顶，给小镇增添了一座可爱的房屋。
通过今天的学习，我们已经学会了在计算机图形学中，如何使用像素绘制点、线条和简单的形状，初步搭建起了像素小镇的框架。明天，我们将继续探索，为小镇添加更多精彩的元素，比如色彩斑斓的窗户、郁郁葱葱的树木，让小镇变得更加生机勃勃！
上述内容展示了计算机图形学基础绘制的知识。你若想学习更复杂图形绘制、动画效果，或有其他修改需求，欢迎随时和我说。
