Question

我有以下示例代码：

    function drawCanvas() {
        var canvas = document.getElementById("logoText");
        var c = canvas.getContext('2d');
        c.lineWidth = 1;
        c.lineStyle = "#FFFFFF";
        c.fillRect(10, 10, 150, 40);
        c.fillStyle = "#FFFFFF";
        c.font = "22px 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',sans-serif"
        c.fillText("Test", 20, 45);
        hexstring1 = "\u2610";
        c.fillText(hexstring1, 20, 70);
    }

如果我假设使用支持SVG和Canvas的浏览器，那么我如何将此代码转换为使用SVG。

使用SVG over Canvas会有什么优势或劣势？

Answer 1

SVG是基于HTML的标签。因此，您必须在SVG标记内插入DOM节点。您的示例大致转换为以下代码。

您可以像在任何其他节点一样在JavaScript中创建此项，但请确保使用document.createElementNS( 'http://www.w3.org/2000/svg', 'rect' );插入节点而不是通常的document.createElement( 'div' );。

<svg xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   viewbox="0 0 100 100">
  <rect x="10" y="10" width="150" height="40" style="stroke: #FFFFFF; stroke-width: 1px" />
  <text x="20" y="45" style="fill: #FFFFFF; font-family: 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',sans-serif; font-size: 22px">Test</text>
  <text x="20" y="70" style="fill: #FFFFFF; font-family: 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',sans-serif; font-size: 22px">&#9744;</text>

</svg>

使用SVG over canvas有两个优点：

您的图片缩放得更好。如果放大图像，可以减少很多伪影。
您可以使您的元素“可点击”。将HTML中的相同事件附加到SVG中的任何元素。因此，您可以使用SVG制作某种自定义按钮，附加点击处理程序并将其用作提交按钮。

Answer 2

您无法直接从canvas转换为svg。您可以将画布绘图命令存储在堆栈中，然后可以生成路径数据字符串，或使用DOM接口。查看路径数据结构的here

我的HTML5 Canvas代码可以转换为SVG吗？

2 个答案: