svg與canvas是html5上繪製圖形應用的兩種完全不同模式的技術，兩種繪製圖形方式各有優缺點，但兩者並非水火不容，尤其是svg內容可直接繪製在canvas上的功能，使得兩者可以完美的融合在一起，讓canvas可享用到現有豐富的svg素材，並不失svg向量無級縮放的特點。
《基於html5的drag and drop生成base64資訊》這篇雖然展示的是拖拽普通柵格的效果，但你也可以直接拖拽svg格式的進行顯示，只不過普通的格式資料為data:image/png型別，而svg格式的資料型別為data:image/svg+xml的型別，下圖為該ht for web拓撲圖拖拽入svg格式的執行效果：
提到canvas和svg的融合，我們將採用ht for web的向量功能展示乙個手機電池充電進度的例項，整個手機電池的靜態部分我們通重載入乙個簡單的svg素材實現，而充電動態變化的部分，我們採用乙個漸進色的ht矩形元素來描述，該矩形的長度通過ht向量資料動態繫結功能，根據充電進度的百分比換算成長度資訊，最後通過定時器模擬資料變化達到動態充電的效果：
ht.default.setimage('battery',
},background: 'red',
gradient: 'spread.vertical'},
]});
var node = new
ht.node();
node.setposition(80, 150);
node.setimage('battery');
node.s('image.stretch', 'uniform');
node.a('percent', 0);
datamodel.add(node);
graphview.seteditable(
true
);setinterval(
function
() node.a('percent', percent);
}, 16);
svg繪製到canvas還有一種特殊的應用場景，就是將html元素通過svg的foreignobject特性描述在svg中，然後canvas繪製svg時，即可把foreignobject描述的html內容繪製到canvas上，可參見 的例項，其中採用了blob的方式設定img的src作為url是比較怪異的技術點，但從上文提到其實我們可以將整個svg內容轉換成data:image/svg+xml;的base64內容即可作為src的url傳入，因此我對該例子做了改造，採用btoa(data)把svg內容轉換成base64的方式設定img.src，這樣方式更容易理解，例子**和效果如下：
canvas繪製文字內容自動折行（mpvue實現）
methods ctx canvas物件 param text 文字 param x 距離左邊的寬度 param y 距離右邊的寬度 param w 文字區域的寬度 param fontstyle 文字的字型風格 位置，有預設值 ctb ctx,text,x,y,w,fontstyle else 我...
Canvas線段的繪製
moveto x,y lineto x,y linewidth 線條寬度 strokestyle 線條樣式 storoke 線條繪製 填充fillstyle 填充 fill 繪製填充 canvas提供的圖形繪製函式 rect x,y,width,height 定義矩形狀態 繪製矩形 fillrect...
canvas 繪製好看的背景
function 封裝方法，壓縮之後減少檔案大小 function get by tagname name 獲取配置引數 function get config option 設定canvas的高寬 function set canvas size 繪製過程 function draw canvas...