通过ZRender画一个大屏的顶部样式标题

介绍：通过ZRender画一个大屏项目的顶部样式，在其中放入大屏的标题。ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。

一、下载

npm install zrender

终端输入以上命令下载包即可。

二、导入

import * as zrender from "zrender";

三、使用。

ZRender的API文档：ZRender 文档 (ecomfe.github.io)

<template>
  <div class="top">
    <div class="header" id="header"></div>
    <div class="top-title">这是一个大屏标题</div>
  </div>
</template>

首先创建一个id为header的元素作为canvas画布，然后通过以下代码初始化

onMounted(()=>{
  zr = zrender.init(document.getElementById("header"));
  init();
})

const init=()=>{
    //你的绘画内容
}

init()方法则为你的绘画方法。init()中的代码较多，在文档里不做展示，需要的请自己拉取demo代码。

四、代码地址

banyan666/Demo-vue (github.com)https://github.com/banyan666/Demo-vue

五、Demo效果