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. MySQL_02之增删改查、PHP数据库操作

    1.数据操作: ①插入记录:  插入单条记录:INSERT tbl_name(字段名称,--) VALUES(字段值,--);  插入多条记录:INSERT tbl_name(字段名称,--) VAL ...

  2. ExtJs控件属性配置详细

    序言:    1.本文摘自网络,看控件命名像是4.0以前的版本,但控件属性配置仍然可以借鉴(不足之处,以后项目用到时再续完善). Ext.form.TimeField: 配置项:            ...

  3. 前端MVVM框架avalon揭秘 - 双向绑定原理

    avalon大家可能不熟悉,但是Knockout估计或多或少听过用过,那么说说KO的几个概念 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Dec ...

  4. ios语音输入崩溃

    游戏中任何可以输入的地方,只要调用语音输入,必然会导致app崩溃,解决方法如下: ok, so essentially the gist of it is that siri wants gl con ...

  5. ECMAScript

    在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)和函数对象(Function). 一般而言,通过new Function产生的对象是函数对象,其他对 ...

  6. geotrellis使用(十一)实现空间数据库栅格化以及根据属性字段进行赋值

    Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 安装空间数据库 空间数据库栅格化 根据属性字段进行赋 ...

  7. 如何获取byte的各个bit值以及常见位操作

    项目中通过信号采集板的数据获取车上仪表盘指示灯的信息,将接收到的数据转成byte后,还要将每一个Byte的各个Bit值分离出来,这样才知道每个bit的值代表的具体信息.这里记录下如何获取byte的各个 ...

  8. C#枚举类型的常用操作总结

    枚举类型是定义了一组"符号名称/值"配对.枚举类型是强类型的.每个枚举类型都是从system.Enum派生,又从system.ValueType派生,而system.ValueTy ...

  9. git取消跟踪文件

    取消跟踪文件: $git rm --cached FILENAME 取消跟踪目录: $git rm --cached FILENAME -r

  10. 初次使用AngularJS中的ng-view,路由控制

    AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面 第一步:引入必要的js: <script src="js/lib/angular.js"> ...