html学习 - 检测浏览器是否支持Canvas

canvas检测

Canvas是html5中的新特性,所以并不是在所有浏览器都有很好的支持,在遇到兼容性的时候,每个人用的浏览器不同,防止出现在有些浏览器发生问题,所以在加载页面的时候就需要提前判断浏览器是否支持Canvas.

判断的方法其实有很多,Javascript本身可以判断,还有很多开发框架也提供了判断的canvas的方法。

html代码

首先我们的html代码是需要有canvas的标签的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Canvas</title>
    <script src="./js/jquery-2.1.1.js"></script> <!-- jquery库 -->
    <script src="./js/modernizr.js"></script> <!--modernizr.js库 -->
    <script src="./js/testcanvas.js"></script>
</head>
<body>
    <canvas id="canvasOne" width="500" height="300">    
    Your brower does not support HTML5 Canvas!
    </canvas>
</body>
</html>

Javascript本身来判断

我们在html中添加了canvas的代码了,并且拥有id=canvasOne了,然后在js文件里可以用如下代码来判断。

var Cvs = document.getElementById("canvasOne");

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

这样就可以了,当遇到不支持canvas的时候,直接return了,就不会继续执行下面的js文件了。

另外一个方法是在其中创建一个虚拟滑步,来检测浏览器是不是支持。
方法如下:

function canvasSupport() {
    return !document.createElement('testcanvas').getContext;
}
function canvasApp() {
    if (!canvasSupport) {
        return;
    }
}

直接执行canvasApp函数就可以了,这个方法是Mark Pilgrim创建的。

用modernizr.js库判断

我们可以从modernizr网站下载代码并将外部的js文件导入。(我在上面的Html代码已经谢了导入的代码了)

检测是否支持的代码:

function canvasSupport() {
    return Modernizr.canvas;
}

方法大致如上面了。
后面我在写一些canvas的学习blog.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值