自定义渲染器实战：用Vue的渲染器API在Canvas上绘制游戏精灵

脱离DOM环境，使用@vue/runtime-core的createRenderer构建Canvas渲染器，实现组件树驱动Canvas绘图，并处理事件坐标系转换。 · 难度：入门 · +10XP

自定义渲染器实战

Vue的渲染器不仅限于浏览器DOM。通过createRenderer，你可以定义自己的节点操作（createElement、insert、patchProp等），将虚拟节点渲染到Canvas、WebGL甚至终端。本教程将创建一个简单的Canvas2D渲染器：每个VNode对应一个精灵对象，通过props控制位置、旋转和颜色。你还需要手动转换点击事件的坐标以匹配Canvas坐标系。

import { createRenderer } from '@vue/runtime-core'
const { createApp } = createRenderer({
  createElement(type) { return { type, children: [], props: {} } },
  insert(child, parent) { parent.children.push(child) },
  patchProp(el, key, prev, next) { el.props[key] = next },
  setElementText(node, text) { node.text = text },
  // ...其他必需方法
})
const App = { render() { /* Canvas绘图逻辑 */ } }
createApp(App).mount(document.getElementById('canvas'))