Question

我似乎无法让我的画布完全响应。高度和宽度使用100％或100vmax时，它会产生响应，但会失去清晰度。

画布的中心似乎在页面底部，好像画布延伸到屏幕之外

canvas when width is set to 100% or 100vmax

Canvas when width is set through javaScript NOT RESPONSIVE

Answer 1

您需要知道canvas的纵横比才能执行此操作。您不能简单地应用100％的宽度和高度，因为那样会延伸到100％的宽度和100％的身体高度。

示例：

让我们说我有一个Canvas，尺寸为864 x 576，我希望它对整个身体都响应。

找到canvas的百分比/比率。为此，您可以手动或通过JavaScript进行。在此示例中，让我们手动处理不变的图像。

比例=宽度/高度* 100

因此，我们的比率为ratio = 864 / 576 * 100，即150％（如1.5：1或3：2）

我们现在使用视口高度vh添加样式。

canvas
{
  display: block;
  margin: auto;
  width: 150vh;
  height: 100vh;
}

现在仍然存在一个问题。如果窗口宽度小于画布宽度怎么办？好的，我们创建一个CSS媒体查询，然后做相反的事情。

比率=（高度/宽度）* 100

所以在这里，我们的比率现在为ratio = 576 / 864 * 100，即66.66％（如0.66：1或7:10）

我们现在需要将视口宽度用于canvas的宽度和高度。宽度始终为100vh。

@media (max-width: 150vh)
{
  canvas
  {
    width: 100vw;
    height: 66.66vw;
  }
}

max-width媒体查询必须等于画布宽度，在此示例中为150vh。

看看代码：https://codepen.io/StudioKonKon/pen/oQobaa

var image = "https://res.cloudinary.com/studiokonkon/image/upload/v1541450918/sample.jpg";

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 864;
canvas.height = 576;


var background = new Image();
background.src = image;

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function()
{
    ctx.drawImage(background,0,0);   
}

body { margin: 0; padding: 0; background: #000; }

.mycanvas
{
  display: block;
  margin: auto;
  width: 150vh;
  height: 100vh;
}

@media (max-width: 150vh)
{
  .mycanvas
  {
    width: 100vw;
    height: 66.66vw;
  }
}

<canvas id="canvas" class="mycanvas"></canvas>

请注意，仅在最新的浏览器中并假定您不关心Internet Explorer，才支持vh和vw单元。

https://caniuse.com/#feat=viewport-units

如何创建可以随浏览器窗口大小调整大小的画布

1 个答案: