svg转canvas丨技术开发分享录

svg转canvas

%{ detail.nickname }

转载翻译 %{ formatTime(detail.create_time) } 字数 %{ detail.content && detail.content.length } 阅读 %{ detail.read_num } 评论 %{ comment.page.total } 喜欢 %{ total(detail.like_uids) } %{ formatTag(v) } 编辑文章

使用 canvg.js 库进行 svg 转 canvas 处理。

<!DOCTYPE html>
<html>
<head>
  <title>svg转canvas</title>
  <script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
</head>
<body>
  <canvas id="my-canvas"></canvas>

  <script>
    const canvas = document.getElementById('my-canvas');
    const ctx = canvas.getContext('2d');

    // SVG 图形
    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
                  <rect x="10" y="10" width="80" height="80" fill="red"/>
                </svg>`;

    // 将 SVG 转换为 Canvas 图形
    canvg(canvas, svg);

    // 在 Canvas 上绘制转换后的图形
    ctx.drawImage(canvas, 0, 0);
  </script>
</body>
</html>

PS：写作不易，如要转裁，请标明转载出处。

%{ comment.page.total }条评论

%{ v }

svg转canvas

猜你想看