Может ли мой HTML5-код ​​Canvas быть преобразован в SVG? - PullRequest
Новая
       13

Может ли мой HTML5-код ​​Canvas быть преобразован в SVG?

3 голосов
/ 03 марта 2012

У меня есть следующий пример кода: 

    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 по сравнению с Canvas?

Ответы [ 2 ]

8 голосов
/ 03 марта 2012

SVG основан на тегах, как и сам HTML.Таким образом, вы должны вставить узлы DOM внутри тега SVG.Ваш пример примерно соответствует следующему коду.

Вы можете создать его в 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 перед холстом:

  • Ваши изображения значительно лучше масштабируются.Гораздо меньше артефактов, если вы увеличите изображение.
  • Вы можете сделать свои элементы "кликабельными".Прикрепите те же события, что и в HTML, к любому элементу в SVG.Таким образом, вы можете, например, создать какую-то пользовательскую кнопку с помощью SVG, прикрепить обработчик щелчка и использовать его в качестве кнопки отправки.
1 голос
/ 03 марта 2012

Вы не можете конвертировать из холста в SVG напрямую.Вы можете сохранить команды рисования холста в стеке, после чего вы можете сгенерировать строку данных пути или использовать интерфейс DOM.Посмотрите здесь для структуры данных пути

...