将html中的svg转化为canvas

385 阅读1分钟

不过目前只通了使用线上svg的传参方式,还支持本地svg的方式以及传递svg的代码的方式,不过还没尝试通 html块

用到的插件地址:canvg.js.org/

<canvas id="canvas"></canvas>

js块

<script type="module">
    import { Canvg } from "https://cdn.skypack.dev/canvg@^4.0.0";
    start();
    async function start() {
      const canvas = document.querySelector("canvas");
      const ctx = canvas.getContext("2d");
      const v = await Canvg.from(ctx, "https://canvg.js.org/img/logo.svg");

      // Start SVG rendering with animations and mouse handling.
      v.start();

      window.onbeforeunload = () => {
        v.stop();
      };
    }
  </script>

实现效果:

image.png