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. Reids入门介绍

    一.入门概述 1.是什么? Redis:REmote DIctionary Server(远程字典服务器) 是完全开源免费的,用C语言编写的,遵守BSD协议,是一个高性能的(key/value)分布式 ...

  2. puppeteer学习笔记合集

    官方英文版API入口(如果你英文好的话):https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md. 汉化版API入口(网上有 ...

  3. go中interface作为参数和switch里的type

    package main import ( "fmt" "time" ) func main() { i :=2 fmt.Println("Write ...

  4. K-Means算法及代码实现

    1.K-Means算法 K-Means算法,也被称为K-平均或K-均值算法,是一种广泛使用的聚类算法.K-Means算法是聚焦于相似的无监督的算法,以距离作为数据对象间相似性度量的标准,即数据对象间的 ...

  5. 《maven实战》笔记（4）----maven的仓库

    maven的构件表示方式是文件,maven通过仓库来统一管理这些文件. maven仓库的布局方式: 任何一个构件都有其唯一的坐标,根据这个坐标可以定义其在仓库中的唯一存储路径 仓库分为两类:本地仓库和 ...

  6. BUUCTF-writeup

    Reverse RSA 使用openssl模块 rsa -pubin -text -modulus -in pub.key得到n值,在 factordb.com上分解大素数得到p,q值,脚本生成pri ...

  7. 分JOB实例

    *&---------------------------------------------------------------------* *& Form F_SET_JOB * ...

  8. centos安装tidy扩展

    wget http://pecl.php.net/get/tidy-1.2.tgztar -xvzf tidy-1.2.tgzcd tidy-1.2/usr/local/php/bin/phpize. ...

  9. iOS-上传头像的使用

    static NSString *const uploadSuccess = @"更改头像成功"; @interface DMAccountInformationViewContr ...

  10. Spring Boot后台运行

    #!/bin/bash nohup java -jar -Dspring.profiles.active=prop app-0.0.1.jar > app.log 2>&1 &am ...