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");
...
2.excanvas中的drawImage方法只接受Image对象为第一个参数,为了使其支持Canvas对象的绘制,可修改如下代码(在excanvas.js中检索到"contextPrototype.drawImage"所在行):
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(''));
}
其中measureText是通过在页面上添加一个隐藏的临时文字容器并获得其宽度来实现.
另外在属性声明的地方要添加默认字体:
// Canvas context properties
this.strokeStyle = '#000';
this.fillStyle = '#000';
this.font = '12px sans-serif';
...
如果还有其他的什么需求或是想法 欢迎与我联系 ck0123456@gmail.com
分享到:
相关推荐
本资源是对网上"给excanvas添加fillText方法"一文操作实战的例子,文中第1点没弄出效果,2和3验证成功
IE8添加canvas支持 1.添加对html5的支持: <!--[if IE]> [removed][removed] ...下载excanvas_r3.zip,引用excanvas.compiled.js。 <!--[if IE]> [removed][removed] [removed][removed] <![endif]-->
excanvas_r3.zip解决了ie8不支持canvas的问题 excanvas_r3.zip解决了ie8不支持canvas的问题
excanvas-modified.js
excanvas.js js画图插件。
excanvas.js免费下载 希望可以帮到有需要的朋友
excanvas.js下载 希望可以帮到有需要的朋友
Google Javascript画线功能excanvas
excanvas.js--图形JS 配合jqplot 使用--在jqplot 前线加载这个JS
excanvas可以很方便的画出动感的图形,使用很方便,该资源可以一起学习canvas的灵活应用
excanvas.js jQuery 曲线绘制(图表)插件.excanvas 使得 IE 能通过 VML 支持 Canvas 标签
该js由本人混合,将jquery.qrcode.min.js与excanvas.compiled.js完美结合,提供了IE8等低版本浏览器不兼容canvas控件生成二维码的解决方案。解决了jquery.qrcode.min.js使用table模式生成二维码时打印不显示的问题。...
一个Javascript的代码库,使IE8甚至更早版本的浏览器可以支持canvas属性。不过,现在主流的浏览器(Safari、Chrome和Firefox)以及IE 9 以上的浏览器都已经支持canvas属性了。
excanvas最新版本,解决ie8不兼容问题,有需要的朋友可以下载,谢谢关注。
只需一个JS让万恶的IE5、IE6、IE7、IE8全都支持H5原生Canvas绘图
一个 使ie支持canvas的东东,目前第三版 。爽就一个字,带实例