码迷,mamicode.com
首页 > Windows程序 > 详细

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

时间:2016-12-07 01:57:37      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:upd   nbsp   creat   基本语法   erro   final   get   try   语句   

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

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

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

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

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

  Test02.js

 1 window.onload=function(){
 2     try{
 3     document.createElement("canvas").getContext("2d");
 4     document.getElementById("support").innerHTML=
 5     "HTML5 Canvas is supported in your browser.";
 6 }
 7 catch(e){
 8     document.getElementById("support").innerHTML=
 9     "HTML5 Canvas is not supported in your browser.";
10 }
11 }

  Test02.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Test02</title>
 6     <script type="text/javascript" src="Test02.js"></script>
 7 </head>
 8 <body>
 9     <div id="support"></div>
10 </body>
11 </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)

标签:upd   nbsp   creat   基本语法   erro   final   get   try   语句   

原文地址:http://www.cnblogs.com/LinSL/p/6139704.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!