使用jquery使html5画布满页
使用jquery使html5画布满页
提问于 2019-01-30 22:32:38
我试着让html画布页面变得完整。在我的代码中，它警告说，画布大小=窗口大小，但它没有显示正确的输出。
这是html ->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>css ->
body
{
margin: 0;
}
canvas
{
/*border: 1px solid black;*/
background: green;
}和jquery ->
$(document).ready(function(){
$.fn.showMSG = function(){
var canvas = $("canvas");
var canvasWidth = canvas.width();
var canvasHeight = canvas.height();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
canvasWidth = windowWidth;
canvasHeight = windowHeight;
var txt = "";
txt += "Canvas width/height: " + canvasWidth;
txt += "x" + canvasHeight + "\n";
txt += "Window width/height: " + windowWidth;
txt += "x" + windowHeight;
alert(txt);
}
$(window).ready(function(){
$.fn.showMSG();
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-31 04:04:02
我已经设法修复了你的代码。让我解释一下。所以，由于width()和height()在我看来像是set/get函数，所以我试着这样做：
canvas.width(windowWidth);
canvas.height(windowHeight);而不是(你所做的)：
canvasWidth = windowWidth;
canvasHeight = windowHeight;而且它起作用了。试试看！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54450567
复制相关文章
相似问题
腾讯云开发者
