100行内实现简易版的 Canvas 渲染器

原创

已于 2023-03-25 17:48:58 修改 · 846 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5

于 2022-04-28 16:32:13 首次发布

本文介绍了一种用100行JavaScript代码实现的简易Canvas渲染器，它提供了节点分层和自动渲染功能，适用于快速创建简单的图形或场景。虽然没有内置渲染操作，但直接暴露了canvas的2D渲染上下文，允许开发者自由发挥。通过使用提供的Container基础类，开发者可以创建并管理节点，轻松构建Canvas场景。

很多时候，我们可能只是为了简单实现几张图或者些简单场景。但是可能是对游戏引擎不熟悉也可能是觉得为了个小东西引个引擎很没必要。这个时候就特别需要一个灵活轻便的工具包可能来完成这件事，今天就特别写一个。

该渲染器使用起来非常简单，他帮助开发者完成两大机制

1、节点分层，开发者可以先操作 docu 元素一样操作节点

2、自动渲染，开发者不必关心，图像何时渲染，在哪里渲染

不过该渲染器并没有实现具体的渲染操作，而是直接把 canvas.getContext("2d") 对象开放给开发者，让其自由发挥。这个渲染器需要开发者对 canvas API 有一定了解

使用教程如下

/////创建舞台    
let stage = new CanvasRender(document.body.querySelector("canvas"));

对，就这么一行代码就搞定了渲染器，他会自动渲染。剩下的就是在舞台中添加节点即可

渲染器中提供了一个基础类【Container 】，所有节点皆需继承这个类，才能被渲染器识别

如下

class Sprite extends Container {
    constructor(url, x, y, w, h) {
        super()
        this.load = false;
        this.img = new Image();
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.img.crossOrigin = "*";
        this.img.onload = () => this.load = true;
        t

最低0.47元/天解锁文章