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

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）

最新文章

热门文章