Html5中的Canvas宽度为100%

有两种方法：1.JavaScript  2.CSS

1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Canvas Resize</title>
 
    <script type="text/javascript">
        function resize_canvas(){
            canvas = document.getElementById("canvas");
            if (canvas.width  < window.innerWidth)
            {
                canvas.width  = window.innerWidth;
            }
 
            if (canvas.height < window.innerHeight)
            {
                canvas.height = window.innerHeight;
            }
        }
    </script>
</head>
 
<body onresize="resize_canvas()">
        <canvas id="canvas">Your browser doesn't support canvas</canvas>
</body>
</html>

　　2:

<html>
  <head>
    <style type="text/css">
      #myCanvas {
        height: 100%; width: 100%; border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas">(Your browser doesn't support canvas)</canvas>
  </body>
</html>
posted @ 2011-09-28 13:50  颖火  阅读(1458)  评论(0)    收藏  举报