在创建HTML5 Canvas元素之前，首先要检测浏览器是否能够拿支持他，如果不支持，就要用文字或图片替代，检测代码如下所示。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--[if IE]<script type="text/javascript" src="../js/excanvas.js" ></script><![endif]-->

    </head>

    <body>

        <div id="support"></div>

    </body>

    <script type="text/javascript">

        try{

            document.createElement("canvas").getContext("2d");

            document.getElementById("support").innerHTML = "当前浏览器支持HTML5 Canvas";

        }catch(e){

            document.getElementById("support").innerHTML = "当前浏览器不支持HTML5 Canvas";

        }

    </script>

</html>

其中“<!--[if IE]<script type="text/javascript" src="../js/excanvas.js" ></script><![endif]-->”是使IE浏览器兼容canvas的插件。

HTML5 Canvas 代码检测浏览器是否支持的更多相关文章

  1. 移动Web开发，4行代码检测浏览器是否支持position:fixed

    不废话,直接上代码 var div = document.createElement('div'); div.style.cssText = 'display:none;position:fixed; ...

  2. WebSocket API使用篇检测浏览器是否支持WebSocket(4)

    WebSocket API是下一代客户端-服务器的异步通信方法.前面有三篇文章已经对WebSocket有了一些介绍,这里我总结了一下.我在使用WebSockets API过程中遇到的问题. 1.检测浏 ...

  3. js检测浏览器是否支持某属性

    以检测浏览器是否支持 input 标签的 required 属性为例: var isSupport = 'required' in document.createElement('input');

  4. 检测浏览器是否支持cookie方法

    cookie 摘自: http://www.cnblogs.com/fish-li/archive/2011/07/03/2096903.html Cookie是什么? Cookie 是一小段文本信息 ...

  5. 代码验证浏览器是否支持html audio 和video

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  6. 检测浏览器是否支持某个css属性

    以浏览器是否支持translate3d 为例说明,当然现代浏览器已经支持该属性.如果浏览器实现了带有前缀的某个属性,比如说支持-webkit-transform,但是不支持直接写transform,可 ...

  7. 检测浏览器是否支持AJAX

    <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Fire ...

  8. 检测浏览器是否支持cookie功能

    <script> if(navigator.cookieEnabled) { document.write("你的浏览器支持cookie功能!"); } else{ d ...

  9. 检测浏览器是否支持range

    昨天的滑块建立在Input range这个基础上  这是IOS5.0及以后才支持的,而且在android2.3以下表现也不对 昨天的检测方式 var input = document.createEl ...

随机推荐

  1. 170512、java日志文件log4j.properties配置详解

    一.Log4j配置 第一步:加入log4j-1.2.8.jar到lib下. 第二步:在CLASSPATH下建立log4j.properties.内容如下: 放在src下的话就不用配置 否则得去web. ...

  2. Oracle 11gR2 RAC监听器原理介绍

    一.基本概念 oracle11gR2 RAC开始引入scan概念,一般通过dns服务器或gns服务器解析scan,也可以使用/etc/hosts文件解析scan,只不过oracle官方不建议这样做,h ...

  3. Java字符编码问题

    今天研究了一下,记录下来 中间用的是redis,可以使用任意其他的io替代,一样的 Test1 String s1 = "我要测试"; String s2 = "I wa ...

  4. IIS7.5站点配置

    1. 创建站点映射目录: c:\website\release 2. 创建系统用户: a.本地用户和组-->用户-->新用户-->用户名\密码:WebUSR.xxxyyy--> ...

  5. Python第一弹--------初步了解Python

    Python是一种跨平台的语言,这意味着它能够运行在所有主要的操作系统中. 语法规范几乎同C语言. 字符串: 当像Python输入一个字符串时,首先要输入一个引号.单引号.双引号.三引号三者等价.通常 ...

  6. testng日志 TestListenerAdapter

    TestListenerAdapter,空方法实现 ITestListener   创建自定义日志记录类 创建另一个新的类名为 CustomListener.java 在 C:\ > TestN ...

  7. activiti整合spring

    activiti的配置文件其实就是一份spring的配置文件,只是默认将processEngineConfiguration做为一个bean来读取. 当和spring进一步整合时,需要使用 Sprin ...

  8. F题:等差区间(RMQ||线段树)

    原题大意:原题链接  题解链接 给定一个长为n的数组元素和q次区间[l,r]询问,判断区间[l,r]内元素排序后能否构成等差数列 #include<cmath> #include<c ...

  9. SQL: coalesce()函数

    ①用途: 将空值替换成其他值 返回第一个非空值 ②表达式: COALESCE是一个函数, (expression_1, expression_2, ...,expression_n)依次参考各参数表达 ...

  10. Android性能优化典范 - 第1季

    https://www.zhihu.com/question/30138734 http://hukai.me/android-performance-patterns/ 2015新年伊始,Googl ...