在创建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. 了解MIP（Mobile Instant Pages）

    mip官网:https://www.mipengine.org/   什么是mip? mip是百度在2016年提出的移动网页加速器项目.可以简单理解为是一个规范.   mip能做什么? mip能帮助站 ...

  2. 沈阳网络赛G-Spare Tire【容斥】

    17.64% 1000ms 131072K   A sequence of integer \lbrace a_n \rbrace{an​} can be expressed as: \display ...

  3. 一个不需要Log4Net的写日志的简单方法

    有些项目写日志时会选择大名鼎鼎的Log4Net.而在我们使用它时,总会出现一些诸如版本不匹配而造成的写日志失败的情况,还要改web.config,还要改AssemblyInfo.而且,它的失败,并不是 ...

  4. .net各版本framework官方下载地址

    版本 链接 说明 Microsoft .NET Framework 4(独立安装程序) https://www.microsoft.com/zh-cn/download/details.aspx?id ...

  5. Oracle Schema Objects——Synonyms

    Oracle Schema Objects 同义词 同义词 = 表的别名. 现在假如说有一张数据表的名称是“USER1.student”,而现在又为这张数据表起了一个“USER1”的名字,以后就可以直 ...

  6. C#桌面程序设计复习

    GGG //屏幕高度 int ScreenH = 1080; this.Location = new Point(this.Location.X, ScreenH - this.Height - 20 ...

  7. Python开发【Django】：路由规则

    Django路由规则 1.基于正则的URL 在templates目录下创建index.html.detail.html文件 <!DOCTYPE html> <html lang=&q ...

  8. JavaScript高级程序设计第三版学习笔记(一)之数据类型区分详谈

    null.NaN.undefined三者的区别是什么? 在初次接触到JavaScript的时候,傻傻的分不清null.NaN.undefined三者到底区别何在,在实际的项目开发中也因为这个问题而困惑 ...

  9. linux内存管理之vmalloc函数分析

    2017-07-09 今天周末,闲来无事聊聊linux内核内存分配那点事……重点在于分析vmalloc的执行 流程 以传统x86架构为例,内核空间内存(3G-4G)主要分为三大部分:DMA映射区,一致 ...

  10. CTE的妙用

    转自:https://blog.csdn.net/kk185800961/article/details/42535223 之前在2本书看到过with as 子句的一个简单例子,网上没找到相关资料. ...