Как я могу сделать холст 100% шириной и высотой страницы?
Сделать холст заполнить всю страницу
Ответ 1
Ну, у меня он работает здесь: Являются ли Google Bouncing Balls HTML5?, используя следующий CSS:
* { margin: 0; padding: 0;}
body, html { height:100%; }
#c {
position:absolute;
width:100%;
height:100%;
}
Где #c - идентификатор элемента canvas.
Ответ 2
вы можете использовать эти коды без jquery
var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
var c = document.getElementById("canvas");
c.width = dimension[0];
c.height = dimension[1];
Ответ 3
Это как-то связано с тегом <canvas>
.
при создании полноэкранного холста <canvas>
приведет к тому, что панель прокрутки не будет отображаться: block.
detail: http://browser.colla.me/show/canvas_cannot_have_exact_size_to_fullscreen
Ответ 4
Вы можете программно установить ширину холста + height:
// Using jQuery to get window width + height.
canvasObject.width = $(window).width();
canvasObject.height = $(window).height();
Я тестировал это, и до тех пор, пока вы перерисовываете то, что на холсте после того, как вы изменили размер, не изменит масштаб.
Ответ 5
Это работает для вас?
<html>
<body style="height: 100%; margin: 0;">
<canvas style="width: 100%; height: 100%;"></canvas>
</body>
</html>
from Закрепить элемент canvas в html, чтобы просмотреть все окно?
Ответ 6
по моим наблюдениям это работает эффективно и дает синий оттенок
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();
<script>
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();
</scrip
html,body
{
height:98.0%;
width:99.5%;
}
canvas
{
display:block;
width:100%;
height:100%;
}
<html>
<body>
<canvas id="can"></canvas>
</body>
</html>