在创建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. Hibernate的状态，缓存和映射

    Hibernate的状态,缓存和映射 1.对象的状态 1.1.对象状态的概念和分类 在使用Hibernate操作数据库的时候,我们先创建了JavaBean对象,然后使用session来保存或者更新到数 ...

  2. es navi map+++++++nginx logs-parser

    http://www.cnblogs.com/ahaii/p/7410421.html [2017-12-17T00:01:03+08:00] ["GET /user/comm/login? ...

  3. mysql 数据操作 单表查询 where约束 工作模式

    select name,age from employee where id >7; 1.首先先找到表   from employee 2.表存在 mysql拿着约束条件  去表里 看依次匹配数 ...

  4. Oracle SQL语句积累

    字段合并: select EVFOUNDATIONTYPEA || EVFOUNDATIONTYPEB|| EVFOUNDATIONTYPEC ||EVFOUNDATIONTYPED as b fro ...

  5. Centos7 Zabbix3.2安装

    实验环境: 阿里云 [zabbix@miyan ~]$ cat /etc/redhat-release CentOS Linux release (Core) 不得不说,官方文档确实强大 1.官方文档 ...

  6. PAT 1061 Dating[简单]

    1061 Dating(20 分) Sherlock Holmes received a note with some strange strings: Let's date! 3485djDkxh4 ...

  7. 右值引用与转移语义（C++11)

    参考资料: http://www.cnblogs.com/lebronjames/p/3614773.html 左值和右值定义: C++( 包括 C) 中所有的表达式和变量要么是左值,要么是右值.通俗 ...

  8. win10用键盘控制鼠标

    打开控制面板 进入轻松使用 更改鼠标的工作方式 勾选启用鼠标键 点击设置鼠标键 应用确定 ctrl+shift+numlock开启鼠标键 小键盘8426上下左右,5类似鼠标单击 ctrl+小键盘加速, ...

  9. 团队 作业6--展示（alpha阶段）

    团队作业6--展示博客(alpha阶段) 一.团队信息 团队码云地址: https://gitee.com/kezhiqing/soft_team_blog 成员介绍: 个人博客地址 团队成员 个人博 ...

  10. 2018 Multi-University Training Contest 4 Solution

    A - Problem A. Integers Exhibition 留坑. B - Problem B. Harvest of Apples 题意:计算$\sum_{i = 0}^{i = m}C( ...