Html learning-check whether the browser supports Canvas

Html learning-check whether the browser supports Canvas
Canvas Detection

Canvas is a new feature in html5, so it is not well supported in all browsers. In case of compatibility, the browsers used by each person are different to prevent problems in some browsers, therefore, when loading a page, you need to determine whether the browser supports Canvas in advance.

There are actually many judgment methods. Javascript itself can be judged, and many development frameworks also provide the canvas Method for judgment.

Html code

First, we need canvas labels for our html code.

    
      Test Canvas<Script src = "./js/jquery-2.1.1.js"> </script>
  <Script src = "./js/modernizr. js"> </script>
  <Script src = "./js/testcanvas. js"> </script>    
  
   
Your brower does not support HTML5 Canvas!
  

Javascript itself to judge

We have added the canvas code in html and haveid=canvasOneThen, you can use the following code in the js file to determine.

var Cvs = document.getElementById("canvasOne");if (!Cvs || !Cvs.getContext){    return;}

In this way, when canvas is not supported, the return operation will not continue to execute the following js file.

Another method is to create a virtual slide in it to check whether the browser supports it.
The method is as follows:

function canvasSupport() {    return !document.createElement('testcanvas').getContext;}function canvasApp() {    if (!canvasSupport) {        return;    }}

Direct executioncanvasAppThe function is ready. This method is created by Mark Pilgrim.

Judge using the modernizr. js Library

We can download code from the modernizr website and import external js files. (I have already thanked the imported code for the preceding Html code)

Check whether the code is supported:

function canvasSupport() {    return Modernizr.canvas;}

The method is roughly shown above.
I am writing some canvas learning blogs later.