不同屏幕的响应式画布 - 最好的方法是什么？答案

【问题标题】：responsive canvas for different screens - best way to do it?不同屏幕的响应式画布 - 最好的方法是什么？
【发布时间】：2014-02-06 18:29:26
【问题描述】：

所以我有一个画布元素，只是为应用程序做一些背景动画。我的问题是，确保它在不同设备上看起来相同的最佳方法是什么？

我是否最好制作不同大小的画布元素并使用 CSS 媒体查询？或者有没有办法让画布灵活并响应使用 JS 或 html 填充 100% 的视口？

任何帮助都会很棒！

<html>
<head>
    <meta charset="utf-8" />
    <title>Canvas Resize</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>

【问题讨论】：

标签： html css canvas responsive-design html5-canvas

【解决方案1】：

您需要明确设置画布的宽度和高度。不要使用 CSS 设置画布大小，因为这只会影响元素而不影响其位图（您的画布位图/图像将被拉伸）。

这是一种方法：

/// assuming canvas variable exists in global scope

window.addEventListener('resize', resizeCanvas, false);

resizeCanvas();    /// call the first time page is loaded

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

然后您可以将 CSS 规则添加到画布元素：

#myCanvas {
    position:fixed; /* or absolute (or not..) depending on your goal */
    left:0;
    top:0;
    }

您的文档 html 和 body 也必须使用 CSS 正确设置：

html, body {
    width:100%;
    height:100%;
    margin:0;
    }

如果你想覆盖整个窗口，还要在最后的 CSS 规则中添加 overflow: hidden 以避免任何滚动条。

希望这会有所帮助。

【讨论】：

+1，是的...使用 Ken 的想法，而不是仅仅使用扭曲原始画布绘图的 CSS 调整大小。

【解决方案2】：

使用 CSS 100% 变量。

canvas {
  width: 100%;
  height: 100%;
  border: solid black 1px;
}

&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

【讨论】：