使用excanvas时的常见问题

红薯 发布于 2011/11/05 06:31
阅读 2K+
收藏 2

HTML5标准已经发布一段时间了,新标准中强大的绘图能力和嵌入多媒体能力备受关注,canvas标签无疑是HTML5的一大招牌。IE6、7、 8原本不支持canvas标签,google提供了一个有效的解决方法ExplorerCanvas,简称excanvas.js。

excanvas实现了大部分canvas的API,在绘图方面其核心是通过IE的VML去实现的,部分API还存在bug。在速度上与 chrome、firefox、safari原生支持的浏览器还差很多。所以excanvas让canvas这项新技术提前开始普及,网页中足以不借助 flash嵌入绘图区域,并支持主流浏览器,但是动画特效方面现在还很难让IE用户接受。

使用方法

使用方法很简单,下载excanvas.js后在header中加入以下代码:

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

常见问题

IE8中绘图错位

加入以下代码启用IE7兼容模式即可解决:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

动态创建canvas没有getContext函数

的原理是在DOM完成后把所有canvas标签渲染成VML object。然而动态创建的canvas标签得不到初始化所以会出此异常。解决方案:

    function createCanvas(id, width, height) {
        var el = document.createElement('canvas');
        el.setAttribute('id', id);
        el.setAttribute('width', width);
        el.setAttribute('height', height);
        // 在这里做IE的判断,IE6、IE7、IE8(jQuery判断写法)
        if ($.browser.msie && /^[678]\./.test($.browser.version)) {
            G_vmlCanvasManager.initElement(el);
        }
        return el;
     
    }

drawImage时图像跳格

调用drawImage时会出现图片跳格,出现这个问题的原因有两个,第一可能是图片没有加载完成就画会这样,第二是版本问题。
第一种解决方案如下:

var img = new Image();
img.onload = function () {
    ctx.drawImage(img);
}
img.src = "pic/path";

第二种可能是使用r3版本的excanvas,在使用以下代码时会出现图片跳格,这是r3的一个bug,解决的方法是使用SVN里较新的版本。

    ctx.translate(200, 200);
    ctx.scale(0.9, 0.9);
    ctx.drawImage(img, 0, 0);

使用globalAlpha不起作用

这个问题还没有解决。

文章出处:http://www.exzdev.com/

加载中
返回顶部
顶部