如何将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>
时间： 2024-10-11 13:04:27