gpt4 book ai didi

html - 基本 HTML 页面中的 Canvas 始终大小为 300x150。

转载 作者:行者123 更新时间:2023-12-04 01:27:06 25 4
gpt4 key购买 nike

我已将我的问题简化为带有 <canvas> 的基本 HTML 文档。元素:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<style>
body {
border: 1px solid #ff5500;
background-color: black;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>

<body>
<canvas id="canv" style='width:1024px;height:768px'>
</canvas>
</body>

</html>

但是我设置了widthheight (使用像素、百分比或视口(viewport)单位),无论我是否设置样式(例如 style='width:1024px;height:768px' ),无论我调整浏览器窗口的大小,开发控制台总是将宽度 x 高度报告为 300x150。为什么会这样,我该如何处理?

这是开发控制台的输出:

var c = document.getElementById("canv");
undefined
c.style.width
"1024px"
c.style.height
"768px"
c.width
300
c.height
150

同样的行为发生在 Chromium 和 Firefox 中。

我对 Stack Overflow 和整个网络进行了全面搜索,发现了很多关于 width 之间的区别。和 clientWidth ,以及关于 Fabric.js 的类似问题,但没有回答这个特定问题。

最佳答案

我认为您所指的宽度和高度是 html 属性,而不是 css。

可以这样修改;

<canvas width="1024" height="768" style="border:1px solid black;">
</canvas>

关于html - 基本 HTML 页面中的 Canvas 始终大小为 300x150。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52373175/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com