我的HTML5 Canvas代碼可以轉換爲SVG嗎？

我有下面的代碼示例：我的HTML5 Canvas代碼可以轉換爲SVG嗎？

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會有什麼優勢或劣勢？

來源

2012-03-03 Samantha J T Star

另請參閱http://stackoverflow.com/questions/8571294/method-to-convert-html5-canvas-to-svg和http://stackoverflow.com/questions/6918597/convert-canvas-or - 控制點到svg – 2012-03-05 12:20:24

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在畫布的兩大優勢：

你能縮放好得多。如果放大圖像，則會出現更少的僞影。
你可以讓你的元素「可點擊」。將HTML中的相同事件附加到SVG中的任何元素。因此，您可以使用SVG製作某種自定義按鈕，附加一個點擊處理程序並將其用作提交按鈕。

來源

2012-03-03 16:15:10 Sirko

您無法直接從畫布轉換爲svg。您可以將畫布繪圖命令存儲在堆棧中，然後可以生成路徑數據字符串或使用DOM接口。查看路徑數據結構here

來源

2012-03-03 16:06:58 philipp

對不起。我的意思是轉換隻是在SVG中重新編碼。也許我沒有解釋得很好。 – 2012-03-03 16:33:26

這是一個好主意，使用這個庫就是這樣做的：http://jonobr1.github.io/two.js/ – michelpm 2013-05-31 21:17:35

@michelpm看起來像一個很好的圖書館，因爲統一apis可能是一個痛苦的後面。另一方面，我幾乎總是隻使用其中一種技術，所以處理一個API就足夠了...... – philipp 2013-06-01 07:04:06

我的HTML5 Canvas代碼可以轉換爲SVG嗎？

回答

相關問題