canvas初识

canvas是html5中新增的标签，用于配合js绘制图形

创建一个画布

    <style type="text/css">
        #box{
            position: absolute;
            left: 0;
            right: 0;
            margin:50px auto;
            background-color: #eee;
        }
    </style>

   <canvas id="box" width="800" height="400">

canvas 是一个二维网格。左上角坐标为 (0,0)
利用js画一个矩形

   var c=document.getElementById("box");
   var ctx=c.getContext("2d");
   ctx.fillStyle="#00bcda";
   ctx.fillRect(0,0,150,75);