https://github.com/samsha/svg2canvas

canvg.js

是的確實有人在做這樣的事，canvg.js 就是一個將SVG轉換成Canvas的工具庫，甚至有些SVG的動畫效果也能得到實現，但是canvg.js存在很多問題：

不可避免的SVG兼容問題

SVG是一種很復雜的矢量圖形語言，完全轉換到Canvas相當于寫一個獨立的SVG查看器，即使是Adobe的SVG Viewer也會存在兼容問題，更何況一個小小的js工具庫

canvg.js無法生成Canvas繪制代碼

canvg.js確實能將SVG繪制到Canvas上，但是無法生成繪制代碼，就意味著需要引入這個類庫，且動態解析SVG，這里存在額外的性能開銷，加上canvg.js本身并不完善，代碼封裝性還是功能上都存在缺陷，在生產環境中引入會帶來問題

professorcloud

網上搜索svg to canvas，可以找到這個：http://www.professorcloud.com/svg-to-canvas/可以將SVG轉換成Canvas，并輸出javascript代碼，符合制作矢量圖標的需要，Qunee早期的內置icon都是這樣制作的，但是這個工具并不完善，不支持漸變，不支持紋理，大部分的SVG圖標無法轉換，于是我們考慮自己寫一個在線工具，以方便客戶使用，我們查看了http://www.professorcloud.com/svg-to-canvas/ 的代碼，它是在某個老版本的canvg.js基礎上修改實現的，是寫死的代碼，不方便后期升級和維護，我們想到一種更好的方式來實現

SVG2Canvas

我們想到一種更好的方式實現SVG到Canvas代碼的轉換，在線地址：http://demo.qunee.com/svg2canvas/

實現思路

通過重寫HTMLCanvasElement相關的方法來實現，基本的思路就是將CanvasRenderingContext2D.prototype中的相關繪制和設置代碼重寫，增加上生產js代碼的功能，比如對CanvasRenderingContext2D#fill()方法的處理，我們可能要重寫這個方法

CanvasRenderingContext2D.prototype.fill2 = function(){

this.fill();

appendCode('ctx.fill();\n');//生成js代碼

}

當然實際上要比這復雜，需要考慮如何重寫方法？如何將參數對象轉換成字符串？此外對于復雜的SVG，可能會需要創建臨時的Canvas對象，還涉及到一些正則表達式，還要注意作用域的問題，花費了些功夫，實現了一套不錯的工具，基本上canvg.js能支持的svg，都能很好的轉換，支持Gradient, 支持Pattern等

在線服務

好的東西如果只是自己使用，未免太浪費了，于是我們又花了不少時間將其做出了一個好的界面，并公布出來

在線地址：http://demo.qunee.com/svg2canvas/

支持Chrome, Safari瀏覽器，左中右布局分布，將svg文件拖拽到左側虛線框中，即可生成Qunee for HTML5中相應的圖片注冊代碼，并及時預覽到圖片在Qunee for HTML5中的展示效果，如下：

使用生成的代碼

將右側文本框中的代碼保存到js文件(比如SVGIcons.js)，并在HTML中引入這個js，之后你就可以直接使用svg文件名作為節點圖標了

node.image = 'DataCenter.svg';

示例代碼

Hello Qunee for HTML5

var graph = new Q.Graph('canvas');

var node = graph.createNode("SVG");

node.image = 'DataCenter.svg';

運行效果

]]>

總結

以上是生活随笔為你收集整理的html5svg在线编辑器,SVG to Canvas在线转换工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。