html学习 - 检测浏览器是否支持Canvas
浏览数：35 /
时间：2015年06月09日
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.
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
