繪製SVG內容到Canvas的HTML5應用

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格式圖片的執行效果：

以下一段小例子，展示了載入一個SVG圖片後，分為七個基本進行縮放繪製的效果，可看出Canvas繪製SVG可保持其向量不失真的特性

function draw(){
    var img = new Image();
    img.src = 'chart.svg';
    document.body.appendChild(img);
    img.onload = function(){
        var canvas = document.getElementById('canvas');
        var g = canvas.getContext('2d'); 
        var width = img.clientWidth * 1.5;
        var height = img.clientHeight * 1.5;                
        var x = 2;
        var y = 2;
        for(var i=0; i<7; i++){
            g.drawImage(img, x, y, width, height);
            x += width + 2;
            width /= 2;
            height /= 2;
        }            
    };
}

 

提到Canvas和SVG的融合，我們將採用HT for Web的向量功能展示一個手機電池充電進度的例項，整個手機電池的靜態部分我們通過載入一個簡單的SVG素材實現，而充電動態變化的部分，我們採用一個漸進色的HT矩形元素來描述，該矩形的長度通過HT向量資料動態繫結功能，根據充電進度的百分比換算成長度資訊，最後通過定時器模擬資料變化達到動態充電的效果：

ht.Default.setImage('battery', {
	width: 64,
	height: 64,
	comps: [   
		{
			type: 'rect',
			rect: {
				func: function(data){
					return [5, 25, 50*data.a('percent'), 16]
				}
			},
			background: 'red',
			gradient: 'spread.vertical'
		},                        
		{
			type: 'image',
			name: 'battery.svg',
			relative: true,
			rect: [0, 0, 1, 1]
		}
	]
});               

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(){
	percent = node.a('percent') + 0.02;
	if(percent > 1){
		percent = 0;
	}
	node.a('percent', percent);
}, 16);

 SVG繪製到Canvas還有一種特殊的應用場景，就是將HTML元素通過SVG的foreignObject特性描述在SVG中，然後Canvas繪製SVG時，即可把foreignObject描述的HTML內容繪製到Canvas上，可參見https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas 的例項，其中採用了Blob的方式設定img的src作為URL是比較怪異的技術點，但從上文提到其實我們可以將整個SVG內容轉換成data:image/svg+xml;的base64內容即可作為src的url傳入，因此我對該例子做了改造，採用btoa(data)把svg內容轉換成base64的方式設定img.src，這樣方式更容易理解，例子程式碼和效果如下：http://v.youku.com/v_show/id_XODg0MTU4NjEy.html

function draw(){
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	var data = 。。。;
	var img = new Image();
	img.onload = function () {
		ctx.drawImage(img, 0, 0);
	};            
	img.src = 'data:image/svg+xml;base64,' + btoa(data);
}