css - max-width:100% の IE10 でキャンバスが正しく表示されない

Question

CSS:

canvas {
    max-width: 100%;
    }

HTML:

<canvas id="Spades" width="240" height="320" style="background-color:white;border-radius:10px">

上記の css は IE10 では機能しません。高さは幅 i に置き換えられます。任意のヘルプが適用されます

Answer 1

キャンバスのサイズをページ全体のサイズに変更しようとしていますか?

max-width は、キャンバスの理論上の最大幅を定義するためにのみ使用され、キャンバスのサイズが変更されることはありません。

ともかく...

キャンバスの描画が歪むため、CSS を使用してキャンバスのサイズを変更しないでください。これは、ブラウザーが css キャンバスのサイズ変更に応答して、既存のキャンバス ピクセルを「引き伸ばす」ためです。

代わりに、キャンバス要素自体の幅を設定して、JavaScript でサイズを変更します。

var canvas = document.getElementById('myCanvas'),
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;