使用 excanvas 实现 canvas 在 IE7~8 的兼容

IE8 及以下的浏览器上不兼容 canvas,可以使用 ExplorerCanvas 做兼容性的替代。

兼容性检测

var canvasSupported = !!document.createElement('canvas').getContext;

excanvas的使用要求

excanvas的例子中是这样使用的:

  • 在html的<head></head>内引入所有的js

  • 在html中的<body>onload上绑定canvas绘图的初始方法

  • 禁用动画new Chart(ctx).Line(dataLine, {animation: false});

经过测试,发现:

  • canvas标签必须写在excanvas初始方法之后,即:canvas必须在excanvas初始完成后生成

动态添加canvas

js写在页面最下方的情况下,只能采用动态添加canvas的方法。

尝试在页面原先的canvas的地方移除并且再添加一个长的一模一样的canvas。

然后调用G_vmlCanvasManager.initElement(canvasNew);初始化canvas。

之后就可以正常使用canvas了,包括canvas中的rgba颜色!

如果发现报错:对象不支持“measureText”属性或方法,那么请使用最新的excanvas

canvas-polyfill

see on github

参考资料

Excanvas for dynamically created canvas elements

Error on IE7 and IE8, Object doesn't support property or method 'measureText'

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,693评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,111评论 25 709
  • 带着未尽的兴,拖着略显疲惫的躯体,我终究是踏上了归程。依旧是两夜的火车,毕竟,旅途中没有给自己定归期,旅行高峰期,...
    乐睿芬飞阅读 3,649评论 0 1
  • 德不配位,必有灾殃! 我们所有的财富、智慧,我们的一切,老祖宗用一个字来代表叫物。 厚德才能承载万物。 这就是清华...
    始之居士阅读 7,641评论 5 4
  • 我曾经无数次的设想过可能会导致我们分手的原因,吵架、欺骗、安全感、性格不合、父母阻止……,也曾经为此预演过种种解决...
    瘾路者阅读 3,276评论 0 3

友情链接更多精彩内容