在创建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. Css-常用css

    /*怪异盒子模型*/ .box { box-sizing: border-box; } /*水平居中的内联块级*/ .inBlock { display: inline-block; vertical ...

  2. python redis基本概念简单操作

    转自:http://www.cnblogs.com/melonjiang/p/5342383.html 一.redis redis是一个key-value存储系统.和Memcached类似,它支持存储 ...

  3. angular自定义指令命名的那个坑

    Directive 先从定义一个简单的指令开始. 定义一个指令本质上是在HTML中通过元素.属性.类或注释来添加功能.AngularJS的内置指令都是以ng开头,如果想自定义指令,建议自定义一个前缀代 ...

  4. mysql数据库导入黑窗口导入导出数据

     一.导出数据库用mysqldump命令(注意mysql的安装路径,即此命令的路径):1.导出数据和表结构:mysqldump -u用户名 -p密码 数据库名 > 数据库名.sql#/usr/l ...

  5. 华硕主板M2N-电源跳线怎么接

    华硕主板M2N 详细参数 http://detail.zol.com.cn/91/90618/param.shtml 电源跳线的连接方法:1.把所有排线理在一起,根据上面的标注,先来明确每根线的定义: ...

  6. Mysql学习笔记—时间计算、年份差、月份差、天数差（转载）

    1.获取当前日期 SELECT NOW(),CURDATE(),CURTIME(); 结果类似: 2. 获取前一天 DAY); 当前日期2018-09-17,结果: 3. 获取后一天 DAY); 当前 ...

  7. word安装楷体gb2312方法。

    1:下载:楷体gb2312.http://www.downza.cn/soft/7732.html 2: 双击安装,将会下载楷体2312  的压缩文件,解压得到楷体2312.ttf. 3:  打开控制 ...

  8. 基于.net core webapi和mongodb的日志系统

    开发环境vs2017,.NET Core2.1, 数据写入到mongodb.思路就是1.提供接口写入日志,2.基于接口封装类库.3.引入类库使用 源码在最后 为什么要写它 很多开源项目像nlog.lo ...

  9. Entity Framework Code First在Oracle下的伪实现（转）

    为什么要说是伪实现,因为还做不到类似MsSql中那样完全的功能.Oralce中的数据库还是要我们自己手动去创建的.这里,我们舍掉了Model First中的EDMX文件,自己在代码里面写模型与映射关系 ...

  10. 随机生成气泡碰撞（原生js）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>随 ...