BinaryDevelop
  1. ホーム
  2. html

[解決済み] 基本的なHTMLページのキャンバスは常に300x150のサイズで表示されます。

2022-02-18 14:38:59

質問

私の問題は、基本的なHTML文書に単純化し、その中に <canvas> 要素を使用します。 

<!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' ) 、ブラウザのウィンドウサイズを変更しても、開発コンソールは常に幅×高さを300×150と報告します。 これはなぜでしょうか、またどのように対処すればよいのでしょうか。

以下は、開発コンソールからの出力です。 

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

ChromiumとFirefoxの両方で同じ動作が発生します。

Stack Overflowやウェブ全般を探し回ってみたのですが、「Substance」と「Substance」の違いについて多くの情報が得られました。 width と clientWidth という質問と、Fabric.jsに関する同様の質問がありますが、この具体的な質問に対する回答はありません。

解決方法を教えてください。

あなたが言っている幅と高さは--。 html属性 であり、CSSではありません。

このように修正することができます。 

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します