canvas教程

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

字号+ 作者:H5之家 来源:H5之家 2016-01-23 14:13 我要评论( )

canvas检测Canvas是html5中的新特性,所以并不是在所有浏览器都有很好的支持,在遇到兼容性的时候,每个人用的浏览器不同,防止出现在有些浏览器发生问题,所以

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

canvas检测

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

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

html代码

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

Your brower does not support HTML5 Canvas! 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; }

方法大致如上面了。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML样式CSS

    HTML样式CSS

    2017-05-01 10:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

网友点评