1.在使用HTML5的Canvas元素时,考虑到有些浏览器不支持canvas元素,或是不支持HTML5 Canvas API中的某些特性,开发人员最好提供一份替代代码。

 以下代码展示如何在canvas中指定替代文本,当浏览器不支持canvas的时候会显示这些替代内容:

  <canvas>Update your browser to enjoy canvas!</canvas>

2.检测浏览器的支持情况

  在创建HTML5 canvas元素之前,首先要确保浏览器能够支持它。可以使用一下代码检测:

  Test02.js

 window.onload=function(){
     try{
     document.createElement("canvas").getContext("2d");
     document.getElementById("support").innerHTML=
     "HTML5 Canvas is supported in your browser.";
 }
 catch(e){
     document.getElementById("support").innerHTML=
     "HTML5 Canvas is not supported in your browser.";
 }
 }

  Test02.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Test02</title>
     <script type="text/javascript" src="Test02.js"></script>
 </head>
 <body>
     <div id="support"></div>
 </body>
 </html>

注:

(1)

  在JavaScript中,可以使用try…catch…finally语句来执行例外处理,即通过它来捕捉错误发生后导致的例外或者执行throw语句产生的例外。它的基本语法如下:
  try {

  // 此处是可能产生例外的语句
  } catch(error) {
  // 此处是负责例外处理的语句
  } finally {
  // 此处是出口语句
  }
 
  上面的代码试图创建一个canvas对象,并且获取其上下文。如果发生错误,则可以捕获错误,进而得知浏览器不支持canvas。
 
另:
  在Javascript代码中,如果不使用 window.onload 则会出现以下错误:
  TypeError: document.getElementById(...) is null。
  这是因为:
  网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式:
           一.将脚本代码放在网页的底端,这样在运行脚本代码的时候,可以确保要操作的对象已经加载完成。
           二.通过window.onload来执行脚本代码。
  

  

Pro HTML5 Programming(Second Edition)2.Canvas API(1)的更多相关文章

  1. Pro HTML5 Programming(Second Edition)2.Canvas API(2)

    1.在页面中加入canvas元素 eg: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  2. 移动端自动化测试(二)之 Appium常用的API(python)函数介绍

    上一章节已经介绍了Appium的环境搭建,其实只要掌握了Appium的工作原理,前期的准备工作和安装过程是比较简单的.那么当我们搭建好Appium环境后接下来做些什么呢?通常思路是开始appium的第 ...

  3. JS开发HTML5游戏《神奇的六边形》(四)

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  4. 【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘

    原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...

  5. 【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

  6. 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  7. HTML5 本地文件操作之FileSystemAPI整理(二)

    一.文件目录操作 1.DirectoryEntry对象 属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...

  8. 我这么玩Web Api(二):数据验证,全局数据验证与单元测试

    目录 一.模型状态 - ModelState 二.数据注解 - Data Annotations 三.自定义数据注解 四.全局数据验证 五.单元测试   一.模型状态 - ModelState 我理解 ...

  9. [Android]使用Dagger 2依赖注入 - API(翻译)

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5092525.html 使用Dagger 2依赖注入 - API ...

随机推荐

  1. Apk去掉签名以及重新签名的方法

    Android开发中很重要的一部就是用自己的密钥给Apk文件签名,不经过签名的Apk文件一般是无法安装的,就算装了最后也是失败. 网上流传的"勾选允许安装未知来源的应用"其实跟签不 ...

  2. 创建分区表和查看分区表的Metadata

    未分区的表,只能存储在一个FileGroup中:对table进行分区后,每一个分区都存储在一个FileGroup中.表分区是将逻辑上一个完整的表,按照特定的字段拆分成Partition set,分散到 ...

  3. android知识点随笔

    android project中Manifest.xml中的<uses-sdk>标签元素决定的. 此标签包含如下3个属性: android:minSdkVersion —— 此属性决定你的 ...

  4. IOS开发资料汇总

    1 IOS账号注册.程序发布流程 1)http://jamesli.cn/blog/?p=955 2)http://jamesli.cn/blog/?p=966 3)http://jamesli.cn ...

  5. 前端学PHP之命名空间

    × 目录 [1]定义 [2]多命名空间 [3]名称解析[4]访问内部元素[5]全局空间[6]别名和导入 前面的话 从广义上来说,命名空间是一种封装事物的方法.在很多地方都可以见到这种抽象概念.例如,在 ...

  6. Hibernate4.0之HibernateSessionFactory源码详解

    import org.hibernate.HibernateException; import org.hibernate.Session; import org.hibernate.cfg.Conf ...

  7. Neutron Vlan Network 原理- 每天5分钟玩转 OpenStack(92)

    前面我们陆续学习了 Neutron local network,flat network 和 DHCP 服务,从本节将开始讨论 vlan network. vlan network 是带 tag 的网 ...

  8. 如何在Windows Server 2008 上添加RD (远程桌面)会话主机配置的远程桌面授权服务器

    在Windows Server系列的现存活跃产品中都默认的会开放两个随机附送的远程控制的授权,而一些特殊条件下我们需要启用多个远程终端连接,在购买了相应的授权之后,我们如何将配置好的服务器添加到远程桌 ...

  9. js实现css3的过渡,需要注意的一点(浏览器优化)

    大部分浏览器对元素几何改变时候的重排做了优化.据说是这样子,一定时间内本应多次重排的改变,浏览器会hold住,仅一次重排.其中如果使用分离的一步处理过程,例如计时器,依然多次重排.例如,当我们应用tr ...

  10. 【NET MVC】View

    通过阅读一些书籍,结合源代码,稍微深入的学习了Asp.Net MVC中的视图View 任何类型的响应都可以利用当前HttpResponse来响应,MVC可以通过Controller的Response属 ...