HTML5 Canvas：初始Canvas

Canvas ，HTML 5中引入它，可以做很多事情：画图、动画、游戏开发等等。

Canvas 元素

Canvas 中文翻译为：画布。

Canvas元素除了公用属性外，只有两个额外的属性：width, height,他们都是没有单位的，其实单位是px，但是不能写单位。如果不指定这两个属性，默认是width为300，height为150。

众所周知，html元素的样式，都可以用css样式来指定。Canvas也不例外。

<html>
    <head>
        <title>Canvas - 01</title>
        <style>
            body{
                background:#dddddd;
            }

            #canvas{
                margin:20px;
                padding:20px;
                background:#ffffff;
                border:thin inset #aaaaaa;
                width:600px;
                height:300px;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas">
            Canvas not supported
        </canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("canvas"),
                ctx = canvas.getContext("2d");
            
            ctx.font='38pt Arial';
            ctx.fillStyle='cornflowerblue';
            ctx.strokeStyle='blue';
            ctx.fillText("Hello Canvas", canvas.width/2 -150, canvas.height/2 + 15);
            ctx.strokeText("Hello Canvas stroke", canvas.width/2 -200, canvas.height/2 + 80);
        </script>
    </body>
</html>