前端开发那些事儿技术贴

判断是否支持canvas

2021-01-13  本文已影响0人  zhudying

创建canvas

var ele = document.createElement('canvas')

方法一 判断dom上getContext方法是否存在

if (!theCanvas || !theCanvas.getContext) {
    return;
}

方法二 创建一个专门用于判断Canvas是否得以支持的函数,而在该函数中,实时生成一个Canvas元素来进行这种判断 — 这种方法很流行,Mark Pilgrim在他的HTML5网站http://diveintohtml5.org中提到了这种方案:

    function isSupportCanvas(){
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }
    
    if(!isSupportCanvas()){
        alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
    }

方法三 使用外部js库
我们最钟爱的方法是使用modernizr.js库(在http://www.modernizr.com中可以找到)。Modernizr是一个简单易用的轻量级JavaScript库,用于测试各种Web技术的兼容性 — 它提供了很多静态的Boolean方法,可以用来测试当前Canvas是否得到支持。

<script src="modernizr-1.6.min.js"></script>

//使用Modernizr测试Canvas的支持性,只需将上面的canvasSupport函数改动一下就可以了:

function canvasSupport() {
    return Modernizr.canvas;
}
上一篇下一篇

猜你喜欢

热点阅读