如何在HTML5画布上绘制SVG文件？

  • Z时代
  • 2024-01-10
  • 分类：综合

要将SVG绘制到画布上，需要使用SVG图像。首先，使用包含HTML的<foreignObject>元素。之后，您需要将SVG图像绘制到画布中。

示例

您可以尝试以下代码在HTML画布上绘制SVG文件


<!DOCTYPE html>
<html>
   <head>
      <title>SVG file on HTML Canvas </title>
   </head>
   <body>
      <canvas id="myCanvas" style="border:2px solid green;" width="300" height="300"></canvas>
      <script>
         var canvas = document.getElementById('myCanvas');
         var ctx = canvas.getContext('2d');
         var data = '<svg xmlns="http://www.w3.org/2000/svg" width="300"
         height="200">' +
            '<foreignObject width="100%" height="100%">' +
               '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:50px">' +
                  'Simply Easy ' +
                  '<span style="color:blue;">' +
                  'Learning</span>' +
               '</div>' +
            '</foreignObject>' +
         '</svg>';
         var DOMURL = window.URL || window.webkitURL || window;
         var img1 = new Image();
         var svg = new Blob([data], {type: 'image/svg+xml'});
         var url = DOMURL.createObjectURL(svg);
         img1.onload = function() {
            ctx.drawImage(img1, 25, 70);
            DOMURL.revokeObjectURL(url);
         }
         img1.src = url;
      </script>
   </body>
</html>

以上是 如何在HTML5画布上绘制SVG文件？ 的全部内容， 来源链接： utcz.com/z/326395.html

回到顶部