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

This article mainly introduces "HTML5 how to test whether the browser supports Canvas". In the daily operation, I believe many people have doubts about how to test whether the browser supports Canvas in HTML5. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how HTML5 tests browsers to support Canvas". Next, please follow the editor to study!

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:

Copy the code

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:

Copy the code

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:

Copy the code

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

}

We believe that using Modernizr.js is the best way to determine whether the browser supports Canvas or not.

At this point, the study on "how to test whether the browser supports Canvas by HTML5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.