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. php ajax 交互

    html 页面 <body> <button id="oBtn">点击我</button> <script type="text ...

  2. 人之初,性本动 - G2 2.1 发布

    前言 随着可视化进入深水区,G2面临了越来越多交互上的需求.动画是提升交互必不可少的一部分,也是之前G2的薄弱环节.这个版本里我们开发并替换了动画底层,统一了时间轴,使G2的动画性能大大提升,并提供了 ...

  3. ImageView设置边框的两种方式

    转载:http://www.2cto.com/kf/201308/239945.html package cc.testimageviewbounds; import android.os.Bundl ...

  4. 【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧

    引言   在现在的前端页面中,尤其是移动端,经常会需要将<header>或者是<footer>模块悬浮出来,跟随页面的滑动保持定位在页面的最上方或者是最下方,如下图所示. “回 ...

  5. BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...

  6. 关于有默认值的字段在用EF做插入操作时的思考(续)

    问题描述 今天下午(看现在这时间,应该是昨天下午了哈),园友 choon 写了这样一篇博文<关于有默认值的字段在用EF做插入操作时的思考>. 博文内容主要记录的是 choon 使用 EF ...

  7. 真正解决问题:maven eclipse tomcat java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener--转

    原文地址:http://www.cnblogs.com/amosli/p/4067665.html 在使用eclipse进行整合springmvc时经常会碰到这样的异常: java.lang.Clas ...

  8. [翻译]利用顶点位移的VR畸变校正

    文章英文原网址: http://www.gamasutra.com/blogs/BrianKehrer/20160125/264161/VR_Distortion_Correction_using_V ...

  9. 将Resource中的图片资源动态绑定到PictureBox中:

    //CurrentCommunication为解决方案的名字,dynamic为图片的名字 pictureBox1.Image = CurrentCommunication.Properties.Res ...

  10. gradle学习笔记

    一直想着花时间学习下gradle,今天有空.入门一下.参考:极客学院gradle使用指南,官方文档:gradle-2.12/docs/userguide/installation.html,以及百度阅 ...