javascript - HTML Canvas 在其他PC上的Chrome上无法正确调整大小

因此，首先，两台计算机都使用chrome，并且我的代码可以在分辨率为1920 x 1080的PC上正常工作。如此处所示，所有条形图都沿着底部移动。

现在，如果我使用开发人员模式（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;
    }