给excanvas添加fillText方法
excanvas使得IE能通过VML支持Canvas标签,但是在一些细节方面还是不尽人意.
比如
1.动态生成的Canvas对象将不支持getContext方法,
2.drawImage方法不能用Canvas对象作为第一个参数,
3.不支持fillText等方法.
本文针对以上三个问题给出改进方案.
1.要使IE中的Canvas对象支持getContext等方法需要调用excanvas中的G_vmlCanvasManager_.initElement方法,由于最后的
G_vmlCanvasManager = G_vmlCanvasManager_;使得G_vmlCanvasManager的作用域是当前window,所以在需要初始化Canvas的时候可以采用如下的方法:
var cav = document.createElement("canvas");if(!cav.getContext) { G_vmlCanvasManager.initElement(cav);}var ctx = cav.getContext("2d");... contextPrototype.drawImage = function(image, var_args) { if (image.getContext) { // draw canvas this.element_.innerHTML += image.getContext("2d").element_.innerHTML; } var dx, dy, dw, dh, sx, sy, sw, sh;... contextPrototype.measureText = function(textToDraw) { var hiddenSpan = document.createElement('span'); hiddenSpan.style.font = this.font; hiddenSpan.innerHTML = textToDraw; var bodyNode = document.getElementsByTagName("body")[0]; bodyNode.appendChild(hiddenSpan); var width = hiddenSpan.offsetWidth; bodyNode.removeChild(hiddenSpan); return {"width" : width + 1}; } contextPrototype.fillText = function(textToDraw, x, y) { var vmlStr = []; var textHeightStr = this.font.split("px")[0].replace(/(^\s+)|(\s+$)/g, ""); var textHeight = /^\d+$/.test(textHeightStr) ? parseInt(textHeightStr) : 0; vmlStr.push('<g_vml_:shape style="font:' + this.font + ';', ' color:' + this.fillStyle + ';', ' position:absolute;', ' left:' + x + 'px;', ' top:' + (y - textHeight) + 'px;', ' width:' + this.measureText(textToDraw).width + 'px;', ' height:' + textHeight + 'px;"', ' ><g_vml_:textbox inset="0,0,0,0">' + textToDraw, ' </g_vml_:textbox>', '</g_vml_:shape>'); this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join('')); }其中measureText是通过在页面上添加一个隐藏的临时文字容器并获得其宽度来实现.// Canvas context properties this.strokeStyle = '#000'; this.fillStyle = '#000'; this.font = '12px sans-serif';...