6 ответов
Ну, я надеялся делать свой полный экран холста также, Это - то, как я сделал это. Я отправлю весь index.html, так как я еще не эксперт CSS: (в основном просто использующий position:fixed и ширина и высота как 100% и вершина и оставленный, поскольку 0% и я вложили этот код CSS для каждого тега. У меня также есть минимальная высота и минимальная ширина как 100%. Когда я попробовал его границей 1 пкс, размер границы изменялся, когда я увеличил и уменьшил масштаб, но холст остался полным экраном.)
<!DOCTYPE html>
<html style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;">
<head>
<title>MOUSEOVER</title>
<script "text/javascript" src="main.js"></script>
</head>
<body id="BODY_CONTAINER" style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;">
<div id="DIV_GUI_CONTAINER" style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;">
<canvas id="myCanvas" style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;">
</canvas>
</div>
</body>
</html>РЕДАКТИРОВАНИЕ: добавьте это к элементу холста:
<canvas id="myCanvas" width="" height="" style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;">
</canvas>добавляют это к javascript
canvas.width = window.screen.width;
canvas.height = window.screen.height;
я нашел, что это сделало рисунок намного более гладким, чем мой исходный комментарий.
Спасибо.
Я надеюсь, что это будет полезно.
// Get the canvas element
var canvas = document.getElementById('canvas');
var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
// Enter fullscreen
function fullscreen(){
if(canvas.RequestFullScreen){
canvas.RequestFullScreen();
}else if(canvas.webkitRequestFullScreen){
canvas.webkitRequestFullScreen();
}else if(canvas.mozRequestFullScreen){
canvas.mozRequestFullScreen();
}else if(canvas.msRequestFullscreen){
canvas.msRequestFullscreen();
}else{
alert("This browser doesn't supporter fullscreen");
}
}
// Exit fullscreen
function exitfullscreen(){
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}else{
alert("Exit fullscreen doesn't work");
}
}
Поскольку это еще не было отправлено и является простой CSS, зафиксируйте:
#canvas {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
}
Работает отлично, если Вы хотите применить полноэкранный фон холста (например, с Granim.js).
- Как Вычислить Полноэкранную Ширину и Высоту
Вот, функции;
canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
B - Как Сделать Полный экран Устойчивым С, Изменяют размер
, Вот изменить размер метод для изменить размер события;
function resizeCanvas() {
canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
WIDTH = canvas.width;
HEIGHT = canvas.height;
clearScreen();
}
C - Как Избавиться От Полос прокрутки
Просто;
<style>
html, body {
overflow: hidden;
}
</style>
D - Демонстрационный Код
<html>
<head>
<title>Full Screen Canvas Example</title>
<style>
html, body {
overflow: hidden;
}
</style>
</head>
<body onresize="resizeCanvas()">
<canvas id="mainCanvas">
</canvas>
<script>
(function () {
canvas = document.getElementById('mainCanvas');
ctx = canvas.getContext("2d");
canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
WIDTH = canvas.width;
HEIGHT = canvas.height;
clearScreen();
})();
function resizeCanvas() {
canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
WIDTH = canvas.width;
HEIGHT = canvas.height;
clearScreen();
}
function clearScreen() {
var grd = ctx.createLinearGradient(0,0,0,180);
grd.addColorStop(0,"#6666ff");
grd.addColorStop(1,"#aaaacc");
ctx.fillStyle = grd;
ctx.fillRect( 0, 0, WIDTH, HEIGHT );
}
</script>
</body>
</html>function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
render();
}
window.addEventListener('resize', resize, false); resize();
function render() { // draw to screen here
}
это просто, ширина холста набора и высота к screen.width, и screen.height. затем нажимают F11! думайте, что F11 должен сделать полный экран в большинстве браузеров, делает в FFox и IE.