比如
1.動態生成的Canvas對象將不支持getContext方法,
2.drawImage方法不能用Canvas對象作爲第一個參數,
3.不支持fillText等方法.
本文針對以上三個問題給出改進方案.
1.要使IE中的Canvas對象支持getContext等方法需要調用excanvas中的G_vmlCanvasManager_.initElement方法,由於最後的
- G_vmlCanvasManager = G_vmlCanvasManager_;
- 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;
- .
3.fillText,measureText也已成爲CanvasRenderingContext2D對象的標準方法,爲了使IE也能支持,在excanvas.js中添加以下代碼:
- 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(''));
- }
另外在屬性聲明的地方要添加默認字體:
- // Canvas context properties
- this.strokeStyle = '#000';
- this.fillStyle = '#000';
- this.font = '12px sans-serif';
- ...
如果還有其他的什麼需求或是想法 歡迎與我聯繫 [email protected]
轉自:http://ck-2036.iteye.com/blog/800897