因此，首先，两台计算机都使用 Chrome，我的代码在我的电脑上正常工作，分辨率为 1920 x 1080 正如此处所示，所有条形图都位于底部。 
现在，如果我使用开发者模式 (f12)，我可以手动输入笔记本电脑的屏幕分辨率，并且它也可以正确缩放。
但是，如果我使用笔记本电脑 1366x768，它只会在屏幕的左侧绘制条形，如下所示 
这是我的代码
window.onload = function() {
var input = document.getElementById("file");
var audio = document.getElementById("audio");
var selectLabel = document.querySelector("label[for=select]");
var audioLabel = document.querySelector("label[for=audio]");
var select = document.querySelector("select");
var context = void 0,
src = void 0,
res = [],
url = "";
function processDirectoryUpload(event) {
var webkitResult = [];
var mozResult = [];
var files;
console.log(event);
select.innerHTML = "";
// do mozilla stuff
function mozReadDirectories(entries, path) {
console.log("dir", entries, path);
return [].reduce.call(entries, function(promise, entry) {
return promise.then(function() {
return Promise.resolve(entry.getFilesAndDirectories() || entry)
.then(function(dir) {
return dir
})
})
}, Promise.resolve())
.then(function(items) {
var dir = items.filter(function(folder) {
return folder instanceof Directory
});
var files = items.filter(function(file) {
return file instanceof File
});
if (files.length) {
// console.log("files:", files, path);
mozResult = mozResult.concat.apply(mozResult, files);
}
if (dir.length) {
// console.log(dir, dir[0] instanceof Directory);
return mozReadDirectories(dir, dir[0].path || path);
} else {
if (!dir.length) {
return Promise.resolve(mozResult).then(function(complete) {
return complete
})
}
}
})
};
function handleEntries(entry) {
let file = "webkitGetAsEntry" in entry ? entry.webkitGetAsEntry() : entry
return Promise.resolve(file);
}
function handleFile(entry) {
return new Promise(function(resolve) {
if (entry.isFile) {
entry.file(function(file) {
listFile(file, entry.fullPath).then(resolve)
})
} else if (entry.isDirectory) {
var reader = entry.createReader();
reader.readEntries(webkitReadDirectories.bind(null, entry, handleFile, resolve))
} else {
var entries = [entry];
return entries.reduce(function(promise, file) {
return promise.then(function() {
return listDirectory(file)
})
}, Promise.resolve())
.then(function() {
return Promise.all(entries.map(function(file) {
return listFile(file)
})).then(resolve)
})
}
})
function webkitReadDirectories(entry, callback, resolve, entries) {
console.log(entries);
return listDirectory(entry).then(function(currentDirectory) {
console.log(`iterating ${currentDirectory.name} directory`, entry);
return entries.reduce(function(promise, directory) {
return promise.then(function() {
return callback(directory)
});
}, Promise.resolve())
}).then(resolve);
}
}
function listDirectory(entry) {
console.log(entry);
return Promise.resolve(entry);
}
function listFile(file, path) {
path = path || file.webkitRelativePath || "/" + file.name;
console.log(`reading ${file.name}, size: ${file.size}, path:${path}`);
webkitResult.push(file);
return Promise.resolve(webkitResult)
};
function processFiles(files) {
Promise.all([].map.call(files, function(file, index) {
return handleEntries(file, index).then(handleFile)
}))
.then(function() {
console.log("complete", webkitResult);
res = webkitResult;
res.reduce(function(promise, track) {
return promise.then(function() {
return playMusic(track)
})
}, displayFiles(res))
})
.catch(function(err) {
alert(err.message);
})
}
if ("getFilesAndDirectories" in event.target) {
return (event.type === "drop" ? event.dataTransfer : event.target).getFilesAndDirectories()
.then(function(dir) {
if (dir[0] instanceof Directory) {
console.log(dir)
return mozReadDirectories(dir, dir[0].path || path)
.then(function(complete) {
console.log("complete:", webkitResult);
event.target.value = null;
});
} else {
if (dir[0] instanceof File && dir[0].size > 0) {
return Promise.resolve(dir)
.then(function() {
console.log("complete:", mozResult);
res = mozResult;
res.reduce(function(promise, track) {
return promise.then(function() {
return playMusic(track)
})
}, displayFiles(res))
})
} else {
if (dir[0].size == 0) {
throw new Error("could not process '" + dir[0].name + "' directory" + " at drop event at firefox, upload folders at 'Choose folder...' input");
}
}
}
}).catch(function(err) {
alert(err)
})
}
files = event.target.files;
if (files) {
processFiles(files)
}
}
function displayFiles(files) {
select.innerHTML = "";
return Promise.all(files.map(function(file, index) {
return new Promise(function(resolve) {
if (/^audio/.test(file.type)) { /* do stuff, that is all code currently within Promise resolver function */} else { /* proceed to next file */ resolve()}
var option = new Option(file.name, index);
select.appendChild(option);
resolve()
})
}))
}
function handleSelectedSong(event) {
if (res.length) {
var index = select.value;
var track = res[index];
playMusic(track)
.then(function(filename) {
console.log(filename + " playback completed")
})
} else {
console.log("No songs to play")
}
}
function playMusic(file) {
return new Promise(function(resolve) {
audio.pause();
audio.onended = function() {
audio.onended = null;
if (url) URL.revokeObjectURL(url);
resolve(file.name);
}
if (url) URL.revokeObjectURL(url);
url = URL.createObjectURL(file);
audio.load();
audio.src = url;
audio.play();
audioLabel.textContent = file.name;
context = context || new AudioContext();
src = src || context.createMediaElementSource(audio);
src.disconnect(context);
var analyser = context.createAnalyser();
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
src.connect(analyser);
analyser.connect(context.destination);
analyser.fftSize = 512;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
var barWidth = (WIDTH / bufferLength) * 1;
var barHeight;
var x = 0;
function renderFrame() {
requestAnimationFrame(renderFrame);
x = 0;
analyser.getByteFrequencyData(dataArray);
ctx.fillStyle = "#1b1b1b";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
for (var i = 0; i < bufferLength; i++) {
barHeight = dataArray[i];
ctx.fillStyle = "rgb(5,155,45)"
ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
x += barWidth + 2;
}
}
renderFrame();
})
}
input.addEventListener("change", processDirectoryUpload);
select.addEventListener("change", handleSelectedSong);
}#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .6);
z-index: 1001;
}
.bg {
width: 100vw;
height: 100vh;
display: block;
position: fixed;
background: url(../images/background.png);
background-repeat: repeat;
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000000;
}
html,
body {
background-color: #1b1b1b;
width: 100%;
height: 100%;
margin: 0px;
border: 0;
position: fixed;
}
#headimg {
position: fixed;
left: 0px;
top: 0px;
z-index: -10;
}
#topbar {
width: 100%;
background-color: #444444;
font-size: 15px;
height: 80px;
z-index: 101;
position: fixed;
top: 0;
}
#buttons {
position: relative;
float: right;
top: 19px;
}
.box1 {
font-family: fixedsys;
position: absolute;
left: 10%;
right: 10%;
top: 150px;
width: 80vw;
background-color: rgba(0, 0, 0, 0.6);
border: 4px solid black;
padding: 0px;
margin: 0px;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
font-family: fixedsys;
color: rgb(5,195,5);
border: 1px solid #000;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
background-color:rgba(0,0,0,0.6);
bottom: -20;
}
.select-style {
padding: 0;
margin: 0;
border: 1px solid #000;
width: 120px;
border-radius: 3px;
overflow: hidden;
background-color: #333;
background:#333;
}
.select-style select {
padding: 5px 8px;
width: 130%;
border: none;
box-shadow: none;
background-color: #333;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-style select:focus {
outline: none;
}
#canvas {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.buttons {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #616161), color-stop(1, #3d3d3d));
background: -moz-linear-gradient( center top, #616161 5%, #3d3d3d 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#616161', endColorstr='#3d3d3d');
background-color: #616161;
-webkit-border-top-left-radius: 25px;
-moz-border-radius-topleft: 25px;
border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
-moz-border-radius-topright: 25px;
border-top-right-radius: 25px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
text-indent: 0;
border: 1px solid #1a1a1a;
display: inline-block;
color: #080808;
font-family: Economica;
font-size: 20px;
font-weight: bold;
font-style: normal;
height: 60px;
line-height: 60px;
width: 123px;
text-decoration: none;
text-align: center;
}
.buttons:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d3d3d), color-stop(1, #616161));
background: -moz-linear-gradient( center top, #3d3d3d 5%, #616161 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3d3d3d', endColorstr='#616161');
background-color: #3d3d3d;
}
.buttons:active {
position: relative;
top: 1px;
}<!doctype html>
<html lang="en">
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>MVTEST</title>
<link href="http://gmtrash.x10.mx/styles/buttons.css" rel="stylesheet" type="text/css">
<link href="http://gmtrash.x10.mx/styles/fonts.css" rel="stylesheet" type="text/css">
<link href="http://gmtrash.x10.mx/styles/mainpage.css" rel="stylesheet" type="text/css">
<link href="http://gmtrash.x10.mx/styles/input.css" rel="stylesheet" type="text/css">
<link href="http://gmtrash.x10.mx/styles/mv.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="http://gmtrash.x10.mx/scripts/mvtest.js" type="text/javascript"></script>
<canvas id="canvas" width="window.innerWidth" height="window.innerHeight"></canvas>
<div id="topbar">
<div align="center" class="box1">
<p align="center" style="color: rgb(24, 255, 128); font-size: 18px">This is a music visualizer made with Javascript. To start select a music folder from your pc with the Select Music Directory button. To fix the the scaling problem when resizing just reselect the song again after you've resized the window.</p>
<div id="content">
<label class="custom-file-upload">
Select Music directory <input id="file" type="file" accept="audio/*" directory allowdirs webkitdirectory/>
<p style="color: rgb(5,195,5);">Now playing:</p>
<label for="audio" class="custom-file-upload"></label>
<p style="color: rgb(5,195,5);">Select Song</p>
<div class="select-style">
<select id="select" >
</select>
</div>
<audio id="audio" controls></audio>
</div>
</label>
<p align="center" style="color: rgb(24, 255, 128); font-size: 16px">
Most likely tempo: <span id="output"></span>
</p>
</div>
<div class="bg"></div>
<div id="buttons"><a href="index.html" class="buttons">Home</a><a href="/games/index.html" class="buttons">Games</a><a href="contact.html" class="buttons">Contact me</a><a href="orders.html" class="buttons">Store</a><a href="./downloads/index.html" class="buttons">Downloads</a></div>
<div id="headimg">
<a href="index.html"><img src="http://gmtrash.x10.mx/images/header.png" style="width:1024px; height:80px" title="header" alt="header"></a>
</div>
</div>
<script>
(function() {
var htmlCanvas = document.getElementById('canvas'),
context = htmlCanvas.getContext('2d');
initialize();
function initialize() {
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();
}
function redraw() {
context.strokeStyle = 'blue';
context.lineWidth = '5';
context.strokeRect(0, 0, window.innerWidth, window.innerHeight);
}
function resizeCanvas() {
htmlCanvas.width = window.innerWidth;
htmlCanvas.height = window.innerHeight;
redraw();
}
})();
</script>
</body>
</html>我不确定为什么会发生这种情况，有什么提示吗？
最佳答案
我使用以下方法来获取窗口的宽度和高度。到目前为止似乎适用于所有浏览器。
var sizeX = 0;
var sizeY = 0;
if (typeof (window.innerWidth) == 'number') { //Non-IE
sizeX = window.innerWidth;
sizeY = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { //IE 6+ in 'standards compliant mode'
sizeX = document.documentElement.clientWidth;
sizeY = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { //IE 4 compatible
sizeX = document.body.clientWidth;
sizeY = document.body.clientHeight;
}
关于javascript - HTML Canvas 在其他电脑上的 Chrome 上无法正确调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45356041/