更多
黑客联盟 黑客软件
学生黑客联盟
您现在的位置:学生黑客联盟 > 编程频道 > WEB前端 > 浏览信息
html学习 - 检测浏览器是否支持Canvas
时间:2015-03-20 22:05 来源:www.stuhack.com 作者:学盟网
canvas检测 Canvas是html5中的新特性,所以并不是在所有浏览器都有很好的支持,在遇到兼容性的时候,每个人用的浏览器不同,防止出现在有些浏览器发生问题,所以在加载页面的时候就需要提前判断浏览器是否支持Canvas. 判断的方法其实有很多,Javascript本身

canvas检测

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

www.stuhack.com

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

html代码

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




    
    Test Canvas
    <script src="./js/jquery-2.1.1.js"></script> 
    <script src="./js/modernizr.js"></script> 
    <script src="./js/testcanvas.js"></script>


        
    Your brower does not support HTML5 Canvas!
    

 

本文来自学盟网(www.stuhack.com)

Javascript本身来判断

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

copyright www.stuhack.com

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

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

本文来自学盟网(www.stuhack.com)

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

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

内容来自学生黑客联盟

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

copyright www.stuhack.com

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

用modernizr.js库判断

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

检测是否支持的代码: 本文来自学盟网(www.stuhack.com)

function canvasSupport() {
    return Modernizr.canvas;
} 
学盟网

方法大致如上面了。
后面我在写一些canvas的学习blog. 内容来自学生黑客联盟




本文标题:html学习 - 检测浏览器是否支持Canvas

本文地址:http://www.stuhack.com/bc/qianduan/032014234.html

免责声明:本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。




百度钱包“落子

一个商户通过审核入驻百度钱包,将获得百度[查看详细]

移动搜索&发

移动搜索在移动端的创新和颠覆也为百度探索[查看详细]

张向宁:移动互联

张向宁回顾了他2002年提出的“互联网十大预[查看详细]

淘宝开卖二维码门

截至4月20日,淘宝已经售出车展的实体门票[查看详细]

百度钱包杀入移动

“百度钱包”将完成的 “搜索用户”与“消[查看详细]