给excanvas添加fillText方法

excanvas使得IE能通过VML支持Canvas标签,但是在一些细节方面还是不尽人意. 
比如 
1.动态生成的Canvas对象将不支持getContext方法, 
2.drawImage方法不能用Canvas对象作为第一个参数, 
3.不支持fillText等方法. 

本文针对以上三个问题给出改进方案. 
1.要使IE中的Canvas对象支持getContext等方法需要调用excanvas中的G_vmlCanvasManager_.initElement方法,由于最后的 

Js代码  

1. G_vmlCanvasManager = G_vmlCanvasManager_;  

使得G_vmlCanvasManager的作用域是当前window,所以在需要初始化Canvas的时候可以采用如下的方法: 

Js代码  

1. var cav = document.createElement("canvas");  
2. if(!cav.getContext) {  
3.   G_vmlCanvasManager.initElement(cav);  
4. }  
5. var ctx = cav.getContext("2d");  
6. ...  

2.excanvas中的drawImage方法只接受Image对象为第一个参数,为了使其支持Canvas对象的绘制,可修改如下代码(在excanvas.js中检索到"contextPrototype.drawImage"所在行): 

Js代码  

1. contextPrototype.drawImage = function(image, var_args) {  
2.     if (image.getContext) { // draw canvas  
3.       this.element_.innerHTML += image.getContext("2d").element_.innerHTML;  
4.     }  
5.   var dx, dy, dw, dh, sx, sy, sw, sh;  
6. .  

3.fillText,measureText也已成为CanvasRenderingContext2D对象的标准方法,为了使IE也能支持,在excanvas.js中添加以下代码: 

Js代码  

1. contextPrototype.measureText = function(textToDraw) {  
2.   var hiddenSpan = document.createElement('span');  
3.   hiddenSpan.style.font = this.font;  
4.   hiddenSpan.innerHTML = textToDraw;  
5.   var bodyNode = document.getElementsByTagName("body")[0];  
6.   bodyNode.appendChild(hiddenSpan);  
7.   var width = hiddenSpan.offsetWidth;  
8.   bodyNode.removeChild(hiddenSpan);  
9.   return {"width" : width + 1};  
10. }  
11.   
12. contextPrototype.fillText = function(textToDraw, x, y) {  
13.   var vmlStr = [];  
14.   var textHeightStr = this.font.split("px")[0].replace(/(^\s+)|(\s+$)/g, "");  
15.   var textHeight = /^\d+$/.test(textHeightStr) ? parseInt(textHeightStr) : 0;  
16.   vmlStr.push('<g_vml_:shape style="font:' + this.font + ';',  
17.                   ' color:' + this.fillStyle + ';',  
18.                   ' position:absolute;',  
19.                   ' left:' + x + 'px;',  
20.                   ' top:' + (y - textHeight) + 'px;',  
21.                   ' width:' + this.measureText(textToDraw).width + 'px;',  
22.                   ' height:' + textHeight + 'px;"',  
23.                   ' ><g_vml_:textbox inset="0,0,0,0">' + textToDraw,  
24.                   ' </g_vml_:textbox>',  
25.                   '</g_vml_:shape>');  
26.   
27.   this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));  
28. }  

其中measureText是通过在页面上添加一个隐藏的临时文字容器并获得其宽度来实现. 
另外在属性声明的地方要添加默认字体: 

Js代码  

1.     // Canvas context properties  
2.     this.strokeStyle = '#000';  
3.     this.fillStyle = '#000';  
4.     this.font = '12px sans-serif';  
5. ...  

如果还有其他的什么需求或是想法 欢迎与我联系 ck0123456@gmail.com