JavaScript实现软件光栅化渲染器01-如何画点

项目代码：https://github.com/foupwang/JavaScript3DRenderer
开发环境：VSCode+Chrome浏览器
参考：《Windows游戏编程大师技巧》(第2版) /《3D游戏编程大师技巧》（André LaMothe）

整个项目跟平台相关的，只需要一个类似DrawPixel的绘制像素功能，其它的全部使用代码实现。

因为是基于浏览器运行，所以我们使用网页Canvas的画点功能。

1、新建一个DrawPoint.html文件，内容如下：

    
    
    
  

  
    
    Please use a browser that supports "canvas"
    
    
    
  

如上所示，定义了一个640*480的绘制区域，入口是main，引入draw_base.js和DrawPoint.js。

2、再新建一个 DrawPoint.js 文件，代码如下：

function main() {
    var canvas = document.getElementById('example');
    if (!canvas) {
        console.log('Failed to retrieve the  element');
        return;
    }

    var ctx = canvas.getContext('2d');

    drawPixel(50, 150, ctx, {r:255,g:0,b:0});
    drawPixel(55, 150, ctx, {r:255,g:0,b:0});
    drawPixel(60, 150, ctx, {r:255,g:0,b:0});
    drawPixel(65, 150, ctx, {r:255,g:0,b:0});
    drawPoint(150, 150, 10, 10, ctx, {r:255,g:0,b:0});
    drawPoint(250, 150, 20, 20, ctx, {r:0,g:255,b:0});
    drawPoint(350, 150, 40, 40, ctx, {r:0,g:64,b:255});
}

其中，drawPixel(50, 150, ctx, {r:255,g:0,b:0}) 表示在坐标(50,15)处画一个红色像素；drawPoint(250, 150, 20, 20, ctx, {r:0,g:255,b:0}) 表示在坐标(250,150)处画一个长宽都为20像素的绿色点。

3、drawPixel和drawPoint方法的实现在 draw_base.js，代码如下：

function drawPixel(x, y, ctx, color) {
    drawPoint(x, y, 1, 1, ctx, color);
}

function drawPoint(x, y, sx, sy, ctx, color) {
    let r = Math.floor(color.r) % 256;
    let g = Math.floor(color.g) % 256;
    let b = Math.floor(color.b) % 256;
    ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',1.0)';
    // ctx.fillStyle = 'rgba(255, 128, 0, 1.0)';
    ctx.fillRect(x, y, sx, sy);
}

如上所示，drawPixel 包装了 drawPoint 函数，drawPoint 最终调用 ctx.fillRect 实现绘制。
关于 ctx.fillRect 的详细用法可搜索 html5 文档，本文不再详述。

用浏览器打开ch01/DrawPoint.html文件，最终实现效果如下。