星期三, 七月 25, 2012

如何用SVG显示汉字。只需要注意HTML需要用UTF-8格式保存即可.

<html> 
<body> 
<p><canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas> 
<script> 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" + 
             "<foreignObject width='100%' height='100%'>" + 
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px;color:red'>" + 
                 "<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>网络的上面</span>" + 
               "</div>" + 
             "</foreignObject>" + 
           "</svg>"; 
var svg = new (self.BlobBuilder || self.MozBlobBuilder || self.WebKitBlobBuilder); 
var DOMURL = self.URL || self.webkitURL || self; 
var img = new Image(); 
svg.append(data); 
var url = DOMURL.createObjectURL(svg.getBlob("image/svg+xml;charset=utf-8")); 
img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    DOMURL.revokeObjectURL(url); 
}; 
img.src = url; 
</script> 
</body> 
</html>