Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how to use HTML5 Canvas to test whether the browser supports Canvas". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

After getting a reference to the Canvas element on the HTML page, we need to test whether the element contains a "context". The context of Canvas refers to the plane defined by the browser for painting. To put it simply, if the context does not exist, Canvas exists in name only. There are several ways to test whether browsers support Canvas. The first method is to check whether the getContext method of the Canvas element exists in the HTML page:

The code is as follows:

If (! theCanvas | |! theCanvas.getContext) {

Return

}

In fact, the above code tests two things: first, it tests whether theCanvas is false (if id does not exist, document.getElementById () returns false); second, it tests the existence of the getContext () function.

In the above code, if the test fails, the return statement executes and the program terminates.

Another method is to create a function specifically used to determine whether Canvas is supported, and in this function, a Canvas element is generated in real time to make this decision-this method is very popular, and Mark Pilgrim mentions this scenario on his HTML5 website http://diveintohtml5.org:

The code is as follows:

Function canvasSupport () {

Return! document.createElement ('canvas'). GetContext

}

Function canvasApp () {

If (! canvasSupport ()) {

Return

}

}

Our favorite approach is to use the modernizr.js library (which can be found in http://www.modernizr.com). Modernizr is an easy-to-use lightweight JavaScript library for testing the compatibility of various Web technologies-it provides a number of static Boolean methods that can be used to test whether the current Canvas is supported.

It's easy to introduce modernizr into the HTML page, download the code from http://www.modernizr.com, and then include this external js file in the HTML page:

The code is as follows:

To test the support of Canvas using Modernizr, simply change the above canvasSupport function:

The code is as follows:

Function canvasSupport () {

Return Modernizr.canvas

}

This is the end of "how to use HTML5 Canvas to test whether the browser supports Canvas". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.