html5绘图铺满整个屏幕

秒速五厘米 2022-03-12 03:41 335阅读 0赞 
  1. <DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=utf-8/>
  5. <title>绘图示列</title>
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
  7. <script type="text/javascript">  
  8. $(function(){  
  9.    var canvas = $('#myCanvas'); 
  10.    canvas.attr("width",$(window).get(0).innerWidth)
  11.    canvas.attr("height",$(window).get(0).innerHeight)
  12.    var context = canvas.get(0).getContext("2d");
  13.    context.fillRect(0,0,canvas.width(),canvas.height());
  14.    $(window).resize(function(){
  15.       canvas.attr("width",$(window).get(0).innerWidth)
  16.       canvas.attr("height",$(window).get(0).innerHeight)
  17.       context.fillRect(0,0,canvas.width(),canvas.height());
  18.    });
  19. });
  20. </script>
  21. <style type="text/css">
  22. *{margin:0;padding:0;}
  23. html,body{height:100%;width:100%}
  24. canvas{display:block;}
  25. </style>
  26. </head>
  27. <body>
  28. <canvas id="myCanvas">
  29. 您的浏览器版本目前不支持HTML5
  30. </canvas>
  31. </body>
  32. </html>

发表评论

表情：
评论列表 （有 0 条评论，335人围观）

还没有评论，来说两句吧...

相关阅读