在创建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. 170530、java 迭代hashmap常用的三种方法

    @SuppressWarnings("rawtypes") public class HashMapDemo { //hashMap遍历 public static void ma ...

  2. Asp.net读取和写入txt文件方法（实例）！

    Asp.NET读取和写入txt文件方法(实例)! [程序第一行的引入命名空间文件 - 参考] System; using System.Collections; using System.Config ...

  3. 2.06StuModify.aspx(修改姓名，性别，所在班级)

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

  4. nginx repos

    vim /etc/yum.repos.d/nginx.repo 然后将下面的内容复制进去: [nginx] name=nginx repo baseurl=http://nginx.org/packa ...

  5. 洛谷P2325王室联邦 SCOI2005 构造+树上分块

    正解:构造 解题报告: 照例先放传送门 umm其实我jio得这题应该在教树上莫队的时候港,应该是用来帮助理解树上莫队的分块方式的 然而这题是在学了树上分块之后再遇到的?就显得没那么难了吼 然后就随便说 ...

  6. 江苏新美星智能物流无人叉车AGV

    新美星一家全球领先的液体包装解决方案供应商,高附加值的产品应用于食品饮料等行业,为液体食品和自动化系统提供完整解决方案.新美星,于CBST2017展会首次亮相了能够从仓库或工厂的某个地方把材料.托盘和 ...

  7. Yarn框架和工作流程研究

    一.概述     将公司集群升级到Yarn已经有一段时间,自己也对Yarn也研究了一段时间,现在开始记录一下自己在研究Yarn过程中的一些笔记.这篇blog主要主要从大体上说说Yarn的基本架构以及其 ...

  8. 网络协议TCP、Http、webservice、socket区别

    网络协议TCP.Http.webservice.socket区别 http 和 webservice 都是基于TCP/IP协议的应用层协议 webservice是基于http的soap协议传输数据 w ...

  9. 3.1 Templates -- Handlerbars Basics(Handlerbars基础知识)

    一.简介 Ember.js使用Handlerbars模板库来强化应用程序的用户界面.它就像普通的HTML,但也给你嵌入表达式去改变现实的内容. Ember使用Handlerbars并且用许多新特性去扩 ...

  10. （15）如何使用Cocos2d-x 3.0制作基于tilemap的游戏：第三部分（完）

    引言 程序截图: 在第二部分教程中,Ray教大家如何在地图中制作可碰撞的区域,如何使用tile属性,如何制作可以拾取的物品以及如何动态修改地图.如何使用“Heads up display”来显示分数. ...