HTML5（一）layout

HTML5（一）layout

1.<canvas> tag
our first example will be test1.html:
<canvas id="tutorial" width="150" height="150" style="background-color:red;">
your browser does not support Canvas tag.
</canvas>

if you are using chrome, you will see a red area with width=150 and height=150.

if you are using other web browsers, you may only see the content 'your browser does not support Canvas tag.'

The detail information about canvas is here: http://www.w3school.com.cn/html5/html5_canvas.asp

2. get render content
var canvas = document.getElementById("turorial");
var ctx = canvas.getContent('2d');
ctx is a CanvasRenderingContext2D object, we can find detail in http://www.w3school.com.cn/htmldom/dom_obj_canvasrenderingcontext2d.asp

3. Supporting from browser
<input type="button" name="Check_Support" value="Check Support" onclick="testCanvas();">
<script type="text/javascript">
    function testCanvas(){
        var canvas = document.getElementById('tutorial');  // get the canvas object
        if (canvas.getContext){                       //check if it is supported by the browser
            alert("support <canvas> tag");
} else {
            alert("not support <canvas> tag");
        }
    }
</script>

4. my sample codes test1.html:
<canvas id="tutorial" width="150" height="150" style="background-color:red;">
you browser does not support Canvas tag.
</canvas>
<input type="button" name="Check_Support" value="Check Support" onclick="testCanvas();">
<script type="text/javascript">
    function testCanvas(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
            alert("support <canvas> tag");
} else {
            alert("not support <canvas> tag");
        }
    }
</script>

references:
http://www.blogjava.net/myqiao/category/46360.html