1. When using HTML5 canvas elements, it is a good idea for developers to provide a replacement code , given that some browsers do not support canvas elements or do not support some of the features in the HTML5 canvas API.
The following code shows how to specify alternate text in the canvas, which is displayed when the browser does not support canvas:
<canvas>update your browser to enjoy canvas!</canvas>
2. Detection of browser support
Before you create a HTML5 canvas element, make sure that the browser supports it first. You can use code detection:
Test02.js
1Window.onload=function(){2 Try{3Document.createelement ("Canvas"). GetContext ("2d");4document.getElementById ("Support"). innerhtml=5"HTML5 Canvas is supported in your browser.";6 }7 Catch(e) {8document.getElementById ("Support"). innerhtml=9"HTML5 Canvas is not supported in your browser.";Ten } One}
Test02.html
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Test02</title>6 <Scripttype= "Text/javascript"src= "Test02.js"></Script>7 </Head>8 <Body>9 <DivID= "Support"></Div>Ten </Body> One </HTML>
Note:
(1)
In JavaScript, you can use the try...catch...finally statement to perform exception handling, which is used to catch exceptions caused by an error or to execute a throw statement. Its basic syntax is as follows:
try {
Here are the statements that may produce exceptions
} catch (Error) {
Here is the statement that is responsible for exception handling
} finally {
Here is the export statement
}the code above attempts to create a canvas object and gets its context. If an error occurs, you can catch the error and know that the browser does not support canvas. another:In JavaScript code, the following error occurs if you do not use Window.onload: TypeError:document.getElementById (...) is null. This is because the JavaScript script code in the Web page often needs to be able to execute after the document has been loaded, otherwise it may not be possible to get the object, in order to avoid this situation, you can use the following two ways:
One. Place the script code at the bottom of the Web page so that when you run the script code, you can ensure that the object you want to manipulate is already loaded.
Two. Execute the script code through window.onload.
Pro HTML5 Programming (Second Edition) 2.Canvas API (1)