本文已参与「新人创作礼」活动.一起开启掘金创作之路。
vue3支持自定义渲染器功能,开放了渲染相关的方法。
接下来会以自定义canvas渲染器的方式,实现canvas渲染,使canvas具备响应式的能力。
1.新建一个自定义渲染器的文件,renderer.js,
2.在main.ts 引入自定义的渲染器
3.
vue提供了createRenderer函数渲染虚拟dom,我们引入运行时核心库@vue/runtime-core,
createRenderer提供了多种可传入的渲染用到的函数,我们传入自定义渲染方式就可以实现自定义渲染。
在renderer.js中我们自定义了createApp同名方法,通过main.ts 传入的渲染节点,创建一个canvas标签,把内容挂载到canvas上显示
insert://插入元素
通过拿到的虚拟dom,使用draw()渲染到canvas
createElement:创建元素
setElementText:创建元素文本
patchProp:修改属性
draw:
vue代码,渲染到canvas里展示了