在创建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. java个人所得税计算器

    class Caculate{ private String name; private double money; private double actual; /** * @param usern ...

  2. Code Forces 652A Gabriel and Caterpillar

    A. Gabriel and Caterpillar time limit per test 1 second memory limit per test 256 megabytes input st ...

  3. With all Java versions it is strongly recommended to not use experimental -XX JVM options.

    https://lucene.apache.org/solr/7_6_0//SYSTEM_REQUIREMENTS.html System Requirements Apache Solr runs ...

  4. kafka集群与zookeeper集群 配置过程

    Kafka的集群配置一般有三种方法,即 (1)Single node – single broker集群: (2)Single node – multiple broker集群:    (3)Mult ...

  5. 在一台server上部署多个Tomcat

    版权声明: https://blog.csdn.net/u011518709/article/details/27181665 在一台server上配置多个Tomcat的方法: 这几天因为在研究OGS ...

  6. 002-原始jpa以及基本加载过程，基本sql使用

    一.概述 1.1.创建 public void createMethod() { EntityManagerFactory factory = Persistence.createEntityMana ...

  7. Underscore.js (1.7.0)-集合（Collections）(25)

    稽核函数(数组或对象) each_.each(list, iteratee, [context]) 别名: forEach 遍历list中的所有元素,按顺序用遍历输出每个元素.如果传递了context ...

  8. Hadoop NameNode 高可用 (High Availability) 实现解析

    转载自:http://reb12345reb.iteye.com/blog/2306818 在 Hadoop 的整个生态系统中,HDFS NameNode 处于核心地位,NameNode 的可用性直接 ...

  9. 系统管理命令之last

    Linux系统中使用以下命令来查看文件的内容: cat  由第一行开始显示文件内容 tac  从最后一行开始显示,可以看出 tac 是 cat 的倒著写! nl   显示的时候,顺道输出行号! mor ...

  10. Spring—spring概述

    Spring框架的特点? 1:轻量级,一站式开发 2:易用,追求代码的最佳实现 3:Spring的内容: a:Ioc容器 b:AOP实现 c:数据访问支持(ORM框架/声明事务[Transaction ...