Windows 8 画布在WinJS中不会自动调整大小
我刚刚将我的游戏移植到Win8JS。这相当简单，令人惊讶。但是我在做游戏的时候有一个固定的决心。我已经在所有画布元素上明确设置了800 x 500像素的分辨率，但我希望它们能够自动缩放到模拟器上的所有分辨率-我如何实现这一点 这就是我的游戏现在的样子：( 在同一链接上 它说“画布自动填充空白”，但在我的情况下它没有，可能是因为我预先定义了固定的高度和宽度 我该怎么做呢？如果我去掉了宽度和高度，画布就看不见了。这一切都是全新的-非常感谢您的帮助Windows 8 画布在WinJS中不会自动调整大小,windows-8,windows-runtime,winjs,Windows 8,Windows Runtime,Winjs,我刚刚将我的游戏移植到Win8JS。这相当简单，令人惊讶。但是我在做游戏的时候有一个固定的决心。我已经在所有画布元素上明确设置了800 x 500像素的分辨率，但我希望它们能够自动缩放到模拟器上的所有分辨率-我如何实现这一点 这就是我的游戏现在的样子：( 在同一链接上 它说“画布自动填充空白”，但在我的情况下它没有，可能是因为我预先定义了固定的高度和宽度 我该怎么做呢？如果我去掉了宽度和高度，画布就看不见了。这一切都是全新的-非常感谢您的帮助 谢谢！如果给控件指定固定大小，它将不会调整大小。如果
谢谢！如果给控件指定固定大小，它将不会调整大小。如果您需要显式布局，则链接建议使用 缩放单个子元素以填充可用空间，而不使用 调整大小。此控件对文件大小的更改作出反应 容器以及子元素大小的更改。对于 例如，媒体查询可能导致纵横比的变化 把你的画布放在一个视图框中，它会为你缩放
<body>
<div data-win-control="WinJS.UI.ViewBox">
<div class="fixedlayout">
<p>Content goes here</p>
</div>
</div>
</body>
//.css file
.fixedlayout {
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
height: 768px;
width: 1024px;
}
内容在这里
//.css文件
.固定布局{
-ms网格柱：1fr；
-ms网格行：1fr；
显示：-ms网格；
高度：768px；
宽度：1024px；
}
<body>
<div data-win-control="WinJS.UI.ViewBox">
<div class="fixedlayout">
<canvas id="canvas"/>
</div>
</div>
</body>
window.onload = draw;
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(255, 215, 0)";
context.fillRect(15, 15, 55, 50);
context.fillStyle = "rgba(0, 0, 200, 0.5)";
context.fillRect(40, 40, 45, 40);
}
.fixedlayout {
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
height: 768px;
width: 1024px;
}
window.onload=draw；
函数绘图（）{
var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
context.fillStyle=“rgb（255，215，0）”；
fillRect（15,15,55,50）；
context.fillStyle=“rgba（0,02000,0.5）”；
fillRect（40,40,45,40）；
}
.固定布局{
-ms网格柱：1fr；
-ms网格行：1fr；
显示：-ms网格；
高度：768px；
宽度：1024px；
}
<body>
<div data-win-control="WinJS.UI.ViewBox">
<div class="fixedlayout">
<p>Content goes here</p>
</div>
</div>
</body>
//.css file
.fixedlayout {
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
height: 768px;
width: 1024px;
}
内容在这里
//.css文件
.固定布局{
-ms网格柱：1fr；
-ms网格行：1fr；
显示：-ms网格；
高度：768px；
宽度：1024px；
}
<body>
<div data-win-control="WinJS.UI.ViewBox">
<div class="fixedlayout">
<canvas id="canvas"/>
</div>
</div>
</body>
window.onload = draw;
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(255, 215, 0)";
context.fillRect(15, 15, 55, 50);
context.fillStyle = "rgba(0, 0, 200, 0.5)";
context.fillRect(40, 40, 45, 40);
}
.fixedlayout {
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
height: 768px;
width: 1024px;
}
window.onload=draw；
函数绘图（）{
var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
context.fillStyle=“rgb（255，215，0）”；
fillRect（15,15,55,50）；
context.fillStyle=“rgba（0,02000,0.5）”；
fillRect（40,40,45,40）；
}
.固定布局{
-ms网格柱：1fr；
-ms网格行：1fr；
显示：-ms网格；
高度：768px；
宽度：1024px；
}