很多时候,我们可能只是为了简单实现几张图或者些简单场景。但是可能是对游戏引擎不熟悉也可能是觉得为了个小东西引个引擎很没必要。这个时候就特别需要一个灵活轻便的工具包可能来完成这件事,今天就特别写一个。
该渲染器使用起来非常简单,他帮助开发者完成两大机制
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 =