码迷,mamicode.com
首页 > 其他好文 > 详细

Canvas随笔(一)

时间:2015-12-14 18:38:00      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:

如何将canvas画布设置成浏览器的宽度和高度?

以下是代码演示:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas</title>
   <style type="text/css">
        *{margin: 0;
          padding: 0;}
        html,body{height: 100%;              
                  width: 100%;}           /*使得画布没有白色空隙,*/
        canvas{display: block;}          /*清除滚动条*/
   </style>
</head>
<script type="text/javascript" src="jquery.1.8.2.min.js"></script>
<script type="text/javascript">
        $(function(){
        var canvas=$("#canvas")
        var context=canvas.get(0).getContext("2d");
            $(window).resize(resizeCanvas);              //当调整浏览器大小时触发改事件
            function resizeCanvas(){              //不管浏览器如何缩放,都不会出现滚动条
            canvas.attr("width",$(window).get(0).innerWidth);
            canvas.attr("height",$(window).get(0).innerHeight);      //把canvas的宽度设置为浏览器窗口的宽度和高度
            context.fillStyle="red";
            context.fillRect(0,0,canvas.width(),canvas.height());
              };
            resizeCanvas();
    })
</script>
<body>
    <div>  
           <canvas id=‘canvas‘ width=‘50‘ height=‘50‘>
              
           </canvas>  
          
     </div>  
</body>
</html>

 

Canvas随笔(一)

标签:

原文地址:http://www.cnblogs.com/mayi007/p/5045789.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!