1. 如果网页必须使用canvas, 则需要告知用户更换或更新浏览器. 这时可以通过在<canvas>标签之间添加替代元素进行

<canvas id="c1"> 您的浏览器不支持canvas, 请更换或更新浏览器</canvas>
<canvas id="c1">

        <img src="/canvasError.jpg" />

</canvas>

2. 如果对不支持canvas的浏览器提供第二套方案, 或者行为逻辑, 则需要在js脚本中判断浏览器是否支持canvas.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="c1" width="300" height="300"></canvas>

    <script>

        function draw(canvasElement){

            // 判断canvas节点是否具有getContext方法, 如果没有, 则说明浏览器不支持canvas

            if (!canvasElement.getContext) return;

            var ctx = canvasElement.getContext("2d");

            // code begin

        }

        var canvasElement = document.getElementById("c1");

        draw(canvasElement);

    </script>

</body>

</html>

怎样判断浏览器是否支持canvas的更多相关文章

  1. 判断浏览器是否支持某个css3属性的javascript方法

    判断浏览器是否支持css3某个属性的方法: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false ...

  2. JS判断浏览器是否支持某一个CSS3属性

    1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...

  3. 判断浏览器是否支持FileReader

    1.js代码: //判断浏览器是否支持FileReader if (typeof FileReader == "undefined") { document.write(" ...

  4. document.documentElement.style判断浏览器是否支持Css3属性

    1.document.documentElement.style 属性定义了当前浏览器支持的所有Css属性 包括带前缀的和不带前缀的 例如:animation,webkitAnimation,msAn ...

  5. 判断浏览器是否支持某一个CSS3属性

    判断浏览器是否支持某一个CSS3属性 function supportCss3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpS ...

  6. 判断浏览器是否支持某个css属性

    方法:直接判断浏览器是否支持某个CSS属性才是王道,document.documentElement.style 如:判断是否支持 transform if( 'MozTransform' in do ...

  7. 判断浏览器是否支持HTML5 video

    话不多说,下面是我从W3C扒的判断浏览器是是否支持H5视频的代码,有需要的小伙伴,拿走不谢 HTML <div id="checkVideoResult"><bu ...

  8. HTML5：判断浏览器是否支持date类型

    在某些情况下,我们需要判断当前浏览器是否支持date类型,如果支持的话,可以让用户用原生的datepicker来选取日期.如果不支持,则我们需要用自己实现的datepicker类库,来提供给用户. 在 ...

  9. 判断浏览器是否支持html5和css3属性

    本文章内容是由一个前辈写的. CSS3特有的属性moz-Transform //判断是否具有相应属性 testProps: function (props) { var i; for (i in pr ...

随机推荐

  1. 应用fluent二维单向流泥沙冲刷作用下河床变形代码【转载】

    本代码转载自:http://www.codeforge.cn/read/260028/keti_2d_b.c__html #include "udf.h" #define Rho ...

  2. Ubuntu下Nginx的安装和卸载

    环境是Ubuntu 16.04 安装: sudo apt-get update sudo apt-get install nginx 卸载: sudo apt-get --purge remove n ...

  3. git 新建仓库第一次提交

    1 . git init //初始化仓库,在初始化的目录中会出现.git的文件夹 2. git add .(文件name) //添加文件到本地仓   3. git commit -m "fi ...

  4. 深入理解Android插件化技术

    深入理解Android插件化技术  转 https://zhuanlan.zhihu.com/p/33017826 插件化技术可以说是Android高级工程师所必须具备的技能之一,从2012年插件化概 ...

  5. C之堆栈

    栈* 自动申请,自动释放* 大小固定,内存空间连续* 从栈上分配的内存叫静态内存 堆* 程序员自己申请* new/malloc* 大小取决于虚拟内存的大小,内存空间不连续* java中自动回收,C中需 ...

  6. [Java复习] Spring Framework 框架小结

    Spring 总共大约有 20 个模块,由 1300 多个不同的文件构成. 而这些组件被分别整合在   核心容器 (Core Container),   AOP(Aspect Oriented Pro ...

  7. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_11-freemarker静态化测试-基于模板字符串静态化

    再定义一个测试方法 把拿到的字符串变成模板 加载器设置好了以后, 加一个断点来测试 生成模板文件 上面这种方式很灵活. 最终代码 @Test public void testGenerateHtmlB ...

  8. 2018.04.03 ABAP OLE操作整理

    OLE整理: 1.定义,分别对应EXCEL,workbook(工作簿),sheet(页),单元格 DATA: EXCEL_OBJ TYPE OLE2_OBJECT, BOOK_OBJ TYPE OLE ...

  9. MIGO 收货

    ls_code-gm_code = '01'. 01 - MB01 - Goods Receipts for Purchase Order 02 - MB31 - Goods Receipts for ...

  10. Flutter 底部的renderflex溢出

    一开始直接使用Scaffold布局,body:new Column  然后模拟器会提示捕获异常: 然后百度了一下Flutter的溢出问题,发现解决办法是使用SingleChildScrollView包 ...