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. jinja2-模版继承

    一 简要 简单的来说模板继承包含基本模板和子模板.其中基本模板里包含了你这个网站里的基本元素的基本骨架,但是里面有一些空的或者是不完善的块(block)需要用子模板来填充. 二 基本模版样例 这个模板 ...

  2. SpringBoot RestTemplate接收文件，并将文件发送到另外一个程序进行存储

    最近有个需求,接收用户上报的证书,并且保存起来,证书大小不到1M,但该证书的保存必须在另外一个程序进行,所以想到使用springboot接收上传文件后,再通过RestTemplate将文件发送给另外一 ...

  3. RGB-D（深度图像） & 图像深度

    RGB-D(深度图像)   深度图像 = 普通的RGB三通道彩色图像 + Depth Map   在3D计算机图形中,Depth Map(深度图)是包含与视点的场景对象的表面的距离有关的信息的图像或图 ...

  4. Linux 之Shell for循环

    @代表所有参数所以如果后面跟上echo $v你会发现他会一次显示user userdebug eng $poo -le ${#prodlist[@]} 这句话是说 $poo小于等于prodlist中的 ...

  5. 设计模式----外观（facade）模式

    外观(facade)模式外观模式(Facade),为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用.uml图

  6. Vue报错 Duplicate keys detected: '1'. This may cause an update error. vue报错

    情况一.错误信息展示为关键字‘keys‘,此时应该检查for循环中的key,循环的key值不为唯一性 (很普通) 情况二.有两个相同的for循环,而这两个for循环的key值是一样的,此时将一个的ke ...

  7. thymeleaf中img标签图片src路径问题

    转载自:解决java - Thymeleaf conditional img src 正确写法. <img class="layui-nav-img" th:src=&quo ...

  8. Linux使用mount挂载Windows共享文件夹

    https://blog.csdn.net/tojohnonly/article/details/71374984 https://github.com/tojohnonly 现实中会有这样的场景 , ...

  9. 我是如何提高工作效率的-工具篇（二）-listary

    痛点: 还在为不能闪电速度搜索全盘文件.程序.无缝切换程序烦恼吗? 效果图: 功能1:搜索 各种文件.支持模糊搜索.全拼.文字首字母等模糊查询方式. (功能强大.尽情探索!)   痛点:文件好多啊,可 ...

  10. Github搭建个人博客的总结

    1.  参考 这个 博客 : https://blog.csdn.net/xudailong_blog/article/details/78762262 2. 把上面按照的就安装,并把git 仓库克隆 ...