您的位置：首页 > 其它

Canvas随笔（一）

2015-12-14 17:00 274 查看

如何将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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航