如何使這個HTML5畫布腳本全屏？
[英]How to make this HTML5 canvas script to full screen?
問題描述
我在設置畫布以填滿整個窗口時遇到了麻煩。 它目前設置為500x500 ..我是編碼的新手，非常感謝任何幫助！ 謝謝。
這是代碼：
<!DOCTYPE html> <html> <head> <title>Starfield effect done in HTML 5</title> <script> window.onload = function() { /* --- config start --- */ var starfieldCanvasId = "starfieldCanvas", // id of the canvas to use framerate = 60, // frames per second this animation runs at (this is not exact) numberOfStarsModifier = 0.15, // Number of stars, higher numbers have performance impact flightSpeed = 0.003; // speed of the flight, the higher this number the faster /* ---- config end ---- */ var canvas = document.getElementById(starfieldCanvasId), context = canvas.getContext("2d"), width = canvas.width, height = canvas.height, numberOfStars = width * height / 1000 * numberOfStarsModifier, dirX = width / 2, dirY = height / 2, stars = [], TWO_PI = Math.PI * 2; // initialize starfield for(var x = 0; x < numberOfStars; x++) { stars[x] = { x: range(0, width), y: range(0, height), size: range(0, 1) }; } // when mouse moves over canvas change middle point of animation canvas.onmousemove = function(event) { dirX = event.offsetX, dirY = event.offsetY; } // start tick at specified fps window.setInterval(tick, Math.floor(1000 / framerate)); // main routine function tick() { var oldX, oldY; // reset canvas for next frame context.clearRect(0, 0, width, height); for(var x = 0; x < numberOfStars; x++) { // save old status oldX = stars[x].x; oldY = stars[x].y; // calculate changes to star stars[x].x += (stars[x].x - dirX) * stars[x].size * flightSpeed; stars[x].y += (stars[x].y - dirY) * stars[x].size * flightSpeed; stars[x].size += flightSpeed; // if star is out of bounds, reset if(stars[x].x < 0 || stars[x].x > width || stars[x].y < 0 || stars[x].y > height) { stars[x] = { x: range(0, width), y: range(0, height), size: 0 }; } // draw star context.strokeStyle = "rgba(255, 255, 255, " + Math.min(stars[x].size, 1) + ")"; context.lineWidth = stars[x].size; context.beginPath(); context.moveTo(oldX, oldY); context.lineTo(stars[x].x, stars[x].y); context.stroke(); } } // get a random number inside a range function range(start, end) { return Math.random() * (end - start) + start; } }; </script> </head> <body style="background:#000;"> <canvas width="500" height="500" id="starfieldCanvas"></canvas> </body> </html>
原始代碼和信用： https ： //www.timewasters-place.com/starfield-animation-done-in-html-5/
1 個解決方案
解決方案1
1 已采納 2017-04-01 23:19:48
我假設您的意思是您希望腳本自動確定屏幕大小，然后將畫布設置為全屏而不是當前的硬編碼500 x 500。
您可以使用以下命令以編程方式確定視口大小，其中寬度和高度分別如下所示。 （來源） ：
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
然后，您可以按如下方式設置畫布的尺寸：
canvas.width = width;
canvas.height = height;
那么，這將是您案例中的完整代碼：
<!DOCTYPE html>
<html>
<head>
<title>Starfield effect done in HTML 5</title>
<script>
window.onload = function() {
/* --- config start --- */
var starfieldCanvasId = "starfieldCanvas", // id of the canvas to use
framerate = 60, // frames per second this animation runs at (this is not exact)
numberOfStarsModifier = 0.15, // Number of stars, higher numbers have performance impact
flightSpeed = 0.003; // speed of the flight, the higher this number the faster
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
/* ---- config end ---- */
var canvas = document.getElementById(starfieldCanvasId),
context = canvas.getContext("2d"),
stars = [],
TWO_PI = Math.PI * 2;
canvas.width = width;
canvas.height = height;
numberOfStars = width * height / 1000 * numberOfStarsModifier;
dirX = width / 2;
dirY = height / 2;
// initialize starfield
for(var x = 0; x < numberOfStars; x++) {
stars[x] = {
x: range(0, width),
y: range(0, height),
size: range(0, 1)
};
}
// when mouse moves over canvas change middle point of animation
canvas.onmousemove = function(event) {
dirX = event.offsetX,
dirY = event.offsetY;
}
// start tick at specified fps
window.setInterval(tick, Math.floor(1000 / framerate));
// main routine
function tick() {
var oldX,
oldY;
// reset canvas for next frame
context.clearRect(0, 0, width, height);
for(var x = 0; x < numberOfStars; x++) {
// save old status
oldX = stars[x].x;
oldY = stars[x].y;
// calculate changes to star
stars[x].x += (stars[x].x - dirX) * stars[x].size * flightSpeed;
stars[x].y += (stars[x].y - dirY) * stars[x].size * flightSpeed;
stars[x].size += flightSpeed;
// if star is out of bounds, reset
if(stars[x].x < 0 || stars[x].x > width || stars[x].y < 0 || stars[x].y > height) {
stars[x] = {
x: range(0, width),
y: range(0, height),
size: 0
};
}
// draw star
context.strokeStyle = "rgba(255, 255, 255, " + Math.min(stars[x].size, 1) + ")";
context.lineWidth = stars[x].size;
context.beginPath();
context.moveTo(oldX, oldY);
context.lineTo(stars[x].x, stars[x].y);
context.stroke();
}
}
// get a random number inside a range
function range(start, end) {
return Math.random() * (end - start) + start;
}
};
</script>
</head>
<body style="background:#000;">
<canvas id="starfieldCanvas"></canvas>
</body>
</html>
我也在小提琴上測試了這個。 這是鏈接： 小提琴
希望這可以幫助！ 如果有效，請告訴我。
如何使HTML5 Canvas“按一下播放”開始屏幕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.