Javascript 让画布填满整个页面_Javascript_Html_Canvas

Javascript 让画布填满整个页面

javascript html canvas

Javascript 让画布填满整个页面,javascript,html,canvas,Javascript,Html,Canvas,如何使画布的宽度和高度达到页面的100%？这对您有用吗 <html> <body style="height: 100%; margin: 0;"> <canvas style="width: 100%; height: 100%;"></canvas> </body> </html> 从可以编程设置画布宽度+高度： // Using jQuery to get window width + heigh

如何使画布的宽度和高度达到页面的100%？

这对您有用吗

<html>
  <body style="height: 100%; margin: 0;">
    <canvas style="width: 100%; height: 100%;"></canvas>
  </body>
</html>

从

可以编程设置画布宽度+高度：

// Using jQuery to get window width + height.
canvasObject.width = $(window).width();
canvasObject.height = $(window).height();

我已经对此进行了测试，只要您在调整大小后重新绘制画布上的内容，它就不会改变缩放比例。

好的，我在这里使用它：通过使用以下CSS：

* { margin: 0; padding: 0;}

body, html { height:100%; }

#c {
    position:absolute;
    width:100%;
    height:100%;
}

其中#c是canvas元素的id。

您可以在不使用jquery的情况下使用这些代码

var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
var c = document.getElementById("canvas");
c.width = dimension[0];
c.height = dimension[1];

这与

标记有关

创建全屏画布时，

如果未设置为显示：块，将导致滚动条

细节：

根据我的观察，这条曲线运行有效，并呈现蓝色阴影


var c=document.getElementById（'can'）；
var ctx=canvas.getContext（'2d'）；
ctx.rect（0，0，canvas.width，canvas.height）；
//添加线性渐变
var g=ctx.createLinearGradient（0，0，c.宽度，c.高度）；
//浅蓝色
g、 addColorStop（0，#8ED6FF'）；
//深蓝色
g、 添加颜色停止（1，#004CB3'）；
context.fillStyle=g；
context.fill（）；
也许这很简单？它将宽度设置为100%，但不会将高度设置为100%。更重要的是，这些物体也被缩放，看起来像是放大了的小光栅图像，所以看起来很奇怪。我能怎么办？可能是重复的不，这不起作用。它只是拉伸图像以填充页面，但不会更改画布的内部宽度和高度。结果只是一团模糊的混乱。
var c = document.getElementById('can');
  var ctx = canvas.getContext('2d');
  ctx.rect(0, 0, canvas.width, canvas.height);
  // add linear gradient
  var g = ctx.createLinearGradient(0, 0, c.width, c.height);
  // light blue color
  g.addColorStop(0, '#8ED6FF');   
  // dark blue color
  g.addColorStop(1, '#004CB3');
  context.fillStyle = g;
  context.fill();

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;