css - 画布在 IE10 中无法正确显示，最大宽度：100%

Question

CSS：

canvas {
    max-width: 100%;
    }

HTML：

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

上面的 css 在 IE10 中不起作用，高度被替换为我提供的宽度。任何帮助都会得到帮助

Answer 1

您是否尝试将画布调整为整页大小？

您的 max-width 仅用于定义画布的理论最大宽度，而不是导致画布调整大小。

反正...

不要使用 CSS 来调整画布的大小，因为你的画布绘图会被扭曲。这是因为浏览器通过“拉伸”现有的画布像素来响应 CSS 画布的大小调整。

相反，通过设置画布元素本身的宽度在 javascript 中调整大小。

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