Html5中的Canvas宽度为100%

最新推荐文章于 2024-05-30 01:51:11 发布

datengyu7836

最新推荐文章于 2024-05-30 01:51:11 发布

阅读量267

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/watchtower/archive/2011/09/28/2194173.html

版权

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

 
     <!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>

 
     <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>