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. MYSQL的两种存储引擎区别

    Innodb引擎 Innodb引擎提供了对数据库ACID事务的支持,并且实现了SQL标准的四种隔离级别.该引擎还提供了行级锁和外键约束,它的设计目标是处理大容量数据库系统,它本身其实就是基于MySQL ...

  2. Git 基本应用

    微信公众号:Java修炼指南博客园:https://home.cnblogs.com/u/wuyx/CSDN: https://mp.csdn.net/简书:https://www.jianshu.c ...

  3. 启动elasticsearch的时候报出Exception in thread "main" SettingsException[Failed to load settings from /usr/local/elasticsearch/config/elasticsearch.yml]; nested: MarkedYAMLException[while scanning a simple ke

    故障现象: [elasticsearch@tiantianml- ~]$ /usr/local/elasticsearch/bin/elasticsearch Exception in thread ...

  4. protobuf ubuntu 18.04环境下安装

    (t20190518) luo@luo-All-Series:~/MyFile$ (t20190518) luo@luo-All-Series:~/MyFile$ (t20190518) luo@lu ...

  5. mvc 接收json 集合 实例

    开始测试了一下,后台用实体类接收,所报异常如下 无奈之下只能传为字符串,然后字符串转json 页面代码如下 后台controller如下:

  6. eclipse快捷键整理

    编辑 Ctrl+1 快速修复(最经典的快捷键,就不用多说了,可以解决很多问题,比如import类.try catch包围等)Ctrl+Shift+F 格式化当前代码Ctrl+Shift+M 添加类的i ...

  7. Windows下Tesseract-OCR的安装

    可以去Github查看tesseract-ocr的信息:https://github.com/tesseract-ocr/tesseract 在写这篇随笔的时候(2018年8月21日)最新版本是3.0 ...

  8. web框架初阶

    第一站 文件结构:web--- |--home.py #页面处理函数    |--index.py #主体函数 |--indexPlus.py #主体函数加强版 |--webdaem.py #通过we ...

  9. Css3 伪元素

    伪元素---用于向某些选择器设置特殊的效果 语法:元素::伪元素 (element::pseudo-element) 兼容性:IE9+ FireFox4+ Chrome Safari Opera fi ...

  10. CG-CTF 南邮 综合题2

    个人网站 http://www.wjlshare.tk 0x00前言 主要考了三块 第一块是文件包含获取源码 第二块是通过sql绕过注入获取密码 第三块是三参数回调后门的利用 做这题的时候结合了别人的 ...