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

最新推荐文章于 2022-06-29 12:40:32 发布

楚游香

最新推荐文章于 2022-06-29 12:40:32 发布

阅读量339

点赞数

分类专栏：渲染引擎文章标签： javascript

本文链接：https://blog.csdn.net/foupwang/article/details/108477627

版权

渲染引擎专栏收录该内容

5 篇文章 1 订阅

订阅专栏

项目代码：https://github.com/foupwang/JavaScript3DRenderer
开发环境：VSCode+Chrome浏览器
参考：《Windows游戏编程大师技巧》(第2版) /《3D游戏编程大师技巧》（André LaMothe）
QQ交流群：1148938167（欢迎加入探讨图形渲染技术）

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

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

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

<!DOCTYPE html>
<html lang=“en”>
	<head>
    <meta charset="utf-8" />
    <title>Draw Point (canvas version)</title>
  </head>
  
  <body onload="main()">
    <canvas id="example" width="640" height="480">
    Please use a browser that supports "canvas"
    </canvas>
    <script src="../lib/draw_base.js"></script>
    <script src="DrawPoint.js"></script>
  </body>
</html>

如上所示，定义了一个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 <canvas> 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文件，最终实现效果如下。

楚游香

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现软件光栅化渲染器01-如何画点

项目代码：https://github.com/foupwang/JavaScript3DRenderer开发环境：VSCode+Chrome浏览器参考：《Windows游戏编程大师技巧》(第2版) /《3D游戏编程大师技巧》（André LaMothe）QQ交流群：1148938167（欢迎加入探讨图形渲染技术）整个项目跟平台相关的，只需要一个类似DrawPixel的绘制像素功能，其它的全部使用代码实现。因为是基于浏览器运行，所以我们使用网页Canvas的画点功能。1、新建一个DrawPoin
复制链接

扫一扫

专栏目录