时间戳

首页 > 解决方案 > 基本 HTML 页面中的画布始终大小为 300x150。

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

问题描述

我已将问题简化为带有<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>

但是无论我设置width和height（使用像素、百分比或视口单位），无论我是否设置样式（例如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 的类似问题，但没有回答这个具体问题。

标签： htmlcsscanvas

解决方案

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

可以像这样修改它们； 

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

推荐阅读