当前位置： 文江博客话题详情

为什么在侧面定向时，这帆布内容会被切断？

发布于 2025-02-08 09:25:23 字数 13058 浏览 1 评论 0原文

我已经制作了一个音频可视化器，并且（我增加了它的高度上限，所以问题更清楚），因为某种原因它只是在某个点上切断了，我无法弄清楚。尽管可视化器将其定向为左侧时，但是当正常锚定在底部时，问题不存在。弄清楚这一点的任何帮助将不胜感激！

现在看起来\/

“糟糕的lookikng”

我希望高度看起来（但侧面，所以它延伸到画布的末端）\/

czj8q.png“ rel =“ nofollow noreferrer”>

<!DOCTYPE html>
<html lang="en">

   <head>
        <meta charset="UTF-8"> 
        <script src="properties.js"></script>
        <script src="clockRefresh.js"></script>
       
        <link href='https://fonts.googleapis.com/css?family=DM Mono' rel='stylesheet'>
        <link href='https://fonts.googleapis.com/css?family=Share Tech Mono' rel='stylesheet'>
    
        <style>
             #time-panel {   
                  position: absolute;    
                  background-color: rgba(0, 0, 0, 0.3);  
                  border-radius: 20px; 
                  
             }
             #hour, #min, #sec {
                  font-family: 'dm mono';
                  font-weight: 1000;                 
             }
             #clock {
                  display: table;
                  margin: 0 auto;
             }
             #audioCanvas {
                  border-radius: 20px; 
                  background-color: rgba(0, 0, 0, 0.3); 
                  position: absolute;
             }
        </style>
        
   </head>
   <body onload="clock()"  > 
        <div id="time-panel">
             <canvas id="canvas"></canvas>
             <span id="clock">
                  <span id="hour"></span>
                  <span id="min"></span>
                  <span id="sec"></span>
             </span>
        </div>

        <!-- Canvas where visualizer is drawn -->
        <canvas id="audioCanvas"></canvas>
       
      
        <!-- Script that creates said visualizer -->
        <script>
             // Get the audio canvas once the page has loaded
             let audioCanvas = document.getElementById('audioCanvas');

             // Get the 2D context of the canvas to draw on it in wallpaperAudioListener
             let audioCanvasCtx = audioCanvas.getContext('2d');

             // Setting internal canvas resolution to user screen resolution
             // (CSS canvas size differs from internal canvas size)
             audioCanvas.height = window.innerHeight;
             audioCanvas.width = window.innerWidth;

             function wallpaperAudioListener(audioArray) {
                  audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);

                  if (sessionStorage.getItem("audio-orientation") == "left" ||
                       sessionStorage.getItem("audio-orientation") == "right") {

                  

                       // Render bars along the full height of the canvas
                       var barWidth = Math.round(1.0 / 128.0 * audioCanvas.height);
                       var halfCount = audioArray.length / 2;
                  }
                  else {
                       // Render bars along the full width of the canvas
                       var barWidth = Math.round(1.0 / 128.0 * audioCanvas.width);
                       var halfCount = audioArray.length / 2;
                  }
                  // Begin with the left channel in red
                  audioCanvasCtx.fillStyle = 'rgb(255,0,0)';
                  // Iterate over the first 64 array elements (0 - 63) for the left channel audio data
                  for (var i = 0; i < halfCount; i += parseInt(sessionStorage.getItem("bar-amount"))) {
                       // Create an audio bar with its hight depending on the audio volume level of the current frequency
                       var height = audioCanvas.height * Math.min(audioArray[i], 1) * sessionStorage.getItem("bar-height");
                       audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * sessionStorage.getItem("bar-distortion"), barWidth, height);
                  }

                  // Now draw the right channel in blue
                  audioCanvasCtx.fillStyle = 'rgb(0,0,255)';
                  // Iterate over the last 64 array elements (64 - 127) for the right channel audio data
                  for (var i = halfCount; i < audioArray.length; i += parseInt(sessionStorage.getItem("bar-amount"))) {
                       // Create an audio bar with its hight depending on the audio volume level
                       // Using audioArray[191 - i] here to inverse the right channel for aesthetics
                       var height = audioCanvas.height * Math.min(audioArray[191 - i], 1) * sessionStorage.getItem("bar-height");;
                       audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * sessionStorage.getItem("bar-distortion"), barWidth, height);
                  }

                  if (sessionStorage.getItem("audio-orientation") == "left") {
                       //temp canvas to store rotation data
                       var tempCanvas = document.createElement("canvas"),
                       tempCtx = tempCanvas.getContext("2d");

                       tempCanvas.width = audioCanvas.width;
                       tempCanvas.height = audioCanvas.height;
                       tempCtx.drawImage(audioCanvas, 0, 0, audioCanvas.width, audioCanvas.height);

                       // Now clear the portion to rotate.
                       audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);

                       audioCanvasCtx.save();
                       // Translate (190/2 is half of the box we drew)
                       audioCanvasCtx.translate(audioCanvas.width / 2, 0);

                       // Rotate it
                       audioCanvasCtx.rotate(90 * Math.PI/180);

                       // Finally draw the image data from the temp canvas.
                       audioCanvasCtx.translate(audioCanvas.height / 45, -audioCanvas.width / 16);
                       audioCanvasCtx.width = audioCanvasCtx.width * 10;
                       audioCanvasCtx.drawImage(tempCanvas, 0, 0, audioCanvas.width, audioCanvas.height * 2, 0, 0, audioCanvas.width, audioCanvas.height * 2);
                       audioCanvasCtx.restore();
                  }
             }


             // Register the audio listener provided by Wallpaper Engine.
             window.wallpaperRegisterAudioListener(wallpaperAudioListener);
        </script>
   </body>
</html>

https://i.sstatic.net/czj8q.png 基于 this ，该提供了更多详细信息，以提供更多详细信息。作品。 bar-values来自另一个存储设置更改的脚本。

使用解决方案更新：

````html
 <head>
      <meta charset="UTF-8"> 
      <script src="properties.js"></script>
      <script src="clockRefresh.js"></script>
     
      <link href='https://fonts.googleapis.com/css?family=DM Mono' rel='stylesheet'>
      <link href='https://fonts.googleapis.com/css?family=Share Tech Mono' rel='stylesheet'>
  
      <style>
           #time-panel {   
                position: absolute;    
                background-color: rgba(0, 0, 0, 0.3);  
                border-radius: 20px; 
                
           }
           #hour, #min, #sec {
                font-family: 'dm mono';
                font-weight: 1000;                 
           }
           #clock {
                display: table;
                margin: 0 auto;
           }
           #audioCanvas {
                border-radius: 20px; 
                background-color: rgba(0, 0, 0, 0.3); 
                position: absolute;
           }
      </style>
      
 </head>
 <body onload="clock()"  > 
      <div id="time-panel">
           <canvas id="canvas"></canvas>
           <span id="clock">
                <span id="hour"></span>
                <span id="min"></span>
                <span id="sec"></span>
           </span>
      </div>

      <!-- Canvas where visualizer is drawn -->
      <canvas id="audioCanvas"></canvas>
     
    
      <!-- Script that creates said visualizer -->
      <script>
           // Get the audio canvas once the page has loaded
           let audioCanvas = document.getElementById('audioCanvas');

           // Get the 2D context of the canvas to draw on it in wallpaperAudioListener
           let audioCanvasCtx = audioCanvas.getContext('2d');

           // Setting internal canvas resolution to user screen resolution
           // (CSS canvas size differs from internal canvas size)
           audioCanvas.height = window.innerHeight;
           audioCanvas.width = window.innerWidth;

           //temp canvas to store rotation data
           var offScreen = document.createElement("canvas"),
           offScreenCtx = offScreen.getContext("2d");


           function wallpaperAudioListener(audioArray) {
                audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);

                if (sessionStorage.getItem("audio-orientation") == "left" ||
                     sessionStorage.getItem("audio-orientation") == "right") {

                     // Render bars along the full height of the canvas
                     var barWidth = Math.round(1.0 / 128.0 * audioCanvas.height);
                     var halfCount = audioArray.length / 2;
                }
                else {
                     // Render bars along the full width of the canvas
                     var barWidth = Math.round(1.0 / 128.0 * audioCanvas.width);
                     var halfCount = audioArray.length / 2;
                }
                // Begin with the left channel in red
                audioCanvasCtx.fillStyle = 'rgb(255,0,0)';
                // Iterate over the first 64 array elements (0 - 63) for the left channel audio data
                for (var i = 0; i < halfCount; i += parseInt(sessionStorage.getItem("bar-amount"))) {
                     // Create an audio bar with its hight depending on the audio volume level of the current frequency
                     var height = audioCanvas.height * Math.min(audioArray[i], 1) * sessionStorage.getItem("bar-height");
                     audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * sessionStorage.getItem("bar-distortion"), barWidth, height);
                }

                // Now draw the right channel in blue
                audioCanvasCtx.fillStyle = 'rgb(0,0,255)';
                // Iterate over the last 64 array elements (64 - 127) for the right channel audio data
                for (var i = halfCount; i < audioArray.length; i += parseInt(sessionStorage.getItem("bar-amount"))) {
                     // Create an audio bar with its hight depending on the audio volume level
                     // Using audioArray[191 - i] here to inverse the right channel for aesthetics
                     var height = audioCanvas.height * Math.min(audioArray[191 - i], 1) * sessionStorage.getItem("bar-height");
                     audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * sessionStorage.getItem("bar-distortion"), barWidth, height);
                }

                if (sessionStorage.getItem("audio-orientation") == "left") {

                     offScreen.width = audioCanvas.width;
                     offScreen.height = audioCanvas.height;
                     offScreenCtx.drawImage(audioCanvas, 0, 0, audioCanvas.width, audioCanvas.height);

                     // Now clear the portion to rotate.
                     audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);

                     audioCanvasCtx.save();
                     // Translate (190/2 is half of the box we drew)
                     audioCanvasCtx.translate(audioCanvas.width, 0);

                     // Rotate it
                     audioCanvasCtx.rotate(90 * Math.PI / 180);

                     // Finally draw the image data from the temp canvas.
                     audioCanvasCtx.translate(audioCanvas.height / 45, -audioCanvas.width / 16);
                     audioCanvasCtx.width = audioCanvasCtx.width * 10;
                     audioCanvasCtx.drawImage(offScreen, 0, 0, audioCanvas.width, audioCanvas.height * 1.9);
                     audioCanvasCtx.restore();
                }
           }


           // Register the audio listener provided by Wallpaper Engine.
           window.wallpaperRegisterAudioListener(wallpaperAudioListener);
      </script>
 </body>
````
原文

I have an audio visualizer I've made and (I've increased the height cap of it so the problem is more clear) for some reason it just cuts off at a certain point and I haven't been able to figure it out. While the visualizer has this issue when oriented to the left like this, the problem does not exist when anchored normally to the bottom. Any help to figure this out would be greatly appreciated!

How it looks now \/

bad lookikng

How I want the height to look (but sideways so its extends to the end of the canvas horizontally) \/

normal looking

This is the code for it:

<!DOCTYPE html>
<html lang="en">

   <head>
        <meta charset="UTF-8"> 
        <script src="properties.js"></script>
        <script src="clockRefresh.js"></script>
       
        <link href='https://fonts.googleapis.com/css?family=DM Mono' rel='stylesheet'>
        <link href='https://fonts.googleapis.com/css?family=Share Tech Mono' rel='stylesheet'>
    
        <style>
             #time-panel {   
                  position: absolute;    
                  background-color: rgba(0, 0, 0, 0.3);  
                  border-radius: 20px; 
                  
             }
             #hour, #min, #sec {
                  font-family: 'dm mono';
                  font-weight: 1000;                 
             }
             #clock {
                  display: table;
                  margin: 0 auto;
             }
             #audioCanvas {
                  border-radius: 20px; 
                  background-color: rgba(0, 0, 0, 0.3); 
                  position: absolute;
             }
        </style>
        
   </head>
   <body onload="clock()"  > 
        <div id="time-panel">
             <canvas id="canvas"></canvas>
             <span id="clock">
                  <span id="hour"></span>
                  <span id="min"></span>
                  <span id="sec"></span>
             </span>
        </div>

        <!-- Canvas where visualizer is drawn -->
        <canvas id="audioCanvas"></canvas>
       
      
        <!-- Script that creates said visualizer -->
        <script>
             // Get the audio canvas once the page has loaded
             let audioCanvas = document.getElementById('audioCanvas');

             // Get the 2D context of the canvas to draw on it in wallpaperAudioListener
             let audioCanvasCtx = audioCanvas.getContext('2d');

             // Setting internal canvas resolution to user screen resolution
             // (CSS canvas size differs from internal canvas size)
             audioCanvas.height = window.innerHeight;
             audioCanvas.width = window.innerWidth;

             function wallpaperAudioListener(audioArray) {
                  audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);

                  if (sessionStorage.getItem("audio-orientation") == "left" ||
                       sessionStorage.getItem("audio-orientation") == "right") {

                  

                       // Render bars along the full height of the canvas
                       var barWidth = Math.round(1.0 / 128.0 * audioCanvas.height);
                       var halfCount = audioArray.length / 2;
                  }
                  else {
                       // Render bars along the full width of the canvas
                       var barWidth = Math.round(1.0 / 128.0 * audioCanvas.width);
                       var halfCount = audioArray.length / 2;
                  }
                  // Begin with the left channel in red
                  audioCanvasCtx.fillStyle = 'rgb(255,0,0)';
                  // Iterate over the first 64 array elements (0 - 63) for the left channel audio data
                  for (var i = 0; i < halfCount; i += parseInt(sessionStorage.getItem("bar-amount"))) {
                       // Create an audio bar with its hight depending on the audio volume level of the current frequency
                       var height = audioCanvas.height * Math.min(audioArray[i], 1) * sessionStorage.getItem("bar-height");
                       audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * sessionStorage.getItem("bar-distortion"), barWidth, height);
                  }

                  // Now draw the right channel in blue
                  audioCanvasCtx.fillStyle = 'rgb(0,0,255)';
                  // Iterate over the last 64 array elements (64 - 127) for the right channel audio data
                  for (var i = halfCount; i < audioArray.length; i += parseInt(sessionStorage.getItem("bar-amount"))) {
                       // Create an audio bar with its hight depending on the audio volume level
                       // Using audioArray[191 - i] here to inverse the right channel for aesthetics
                       var height = audioCanvas.height * Math.min(audioArray[191 - i], 1) * sessionStorage.getItem("bar-height");;
                       audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * sessionStorage.getItem("bar-distortion"), barWidth, height);
                  }

                  if (sessionStorage.getItem("audio-orientation") == "left") {
                       //temp canvas to store rotation data
                       var tempCanvas = document.createElement("canvas"),
                       tempCtx = tempCanvas.getContext("2d");

                       tempCanvas.width = audioCanvas.width;
                       tempCanvas.height = audioCanvas.height;
                       tempCtx.drawImage(audioCanvas, 0, 0, audioCanvas.width, audioCanvas.height);

                       // Now clear the portion to rotate.
                       audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);

                       audioCanvasCtx.save();
                       // Translate (190/2 is half of the box we drew)
                       audioCanvasCtx.translate(audioCanvas.width / 2, 0);

                       // Rotate it
                       audioCanvasCtx.rotate(90 * Math.PI/180);

                       // Finally draw the image data from the temp canvas.
                       audioCanvasCtx.translate(audioCanvas.height / 45, -audioCanvas.width / 16);
                       audioCanvasCtx.width = audioCanvasCtx.width * 10;
                       audioCanvasCtx.drawImage(tempCanvas, 0, 0, audioCanvas.width, audioCanvas.height * 2, 0, 0, audioCanvas.width, audioCanvas.height * 2);
                       audioCanvasCtx.restore();
                  }
             }


             // Register the audio listener provided by Wallpaper Engine.
             window.wallpaperRegisterAudioListener(wallpaperAudioListener);
        </script>
   </body>
</html>

The code is based on this which gives a bit more detail on how the code works. The bar-values are coming from another script that store settings changes.

Updated with solution:

````html

 <head>
      <meta charset="UTF-8"> 
      <script src="properties.js"></script>
      <script src="clockRefresh.js"></script>
     
      <link href='https://fonts.googleapis.com/css?family=DM Mono' rel='stylesheet'>
      <link href='https://fonts.googleapis.com/css?family=Share Tech Mono' rel='stylesheet'>
  
      <style>
           #time-panel {   
                position: absolute;    
                background-color: rgba(0, 0, 0, 0.3);  
                border-radius: 20px; 
                
           }
           #hour, #min, #sec {
                font-family: 'dm mono';
                font-weight: 1000;                 
           }
           #clock {
                display: table;
                margin: 0 auto;
           }
           #audioCanvas {
                border-radius: 20px; 
                background-color: rgba(0, 0, 0, 0.3); 
                position: absolute;
           }
      </style>
      
 </head>
 <body onload="clock()"  > 
      <div id="time-panel">
           <canvas id="canvas"></canvas>
           <span id="clock">
                <span id="hour"></span>
                <span id="min"></span>
                <span id="sec"></span>
           </span>
      </div>

      <!-- Canvas where visualizer is drawn -->
      <canvas id="audioCanvas"></canvas>
     
    
      <!-- Script that creates said visualizer -->
      <script>
           // Get the audio canvas once the page has loaded
           let audioCanvas = document.getElementById('audioCanvas');

           // Get the 2D context of the canvas to draw on it in wallpaperAudioListener
           let audioCanvasCtx = audioCanvas.getContext('2d');

           // Setting internal canvas resolution to user screen resolution
           // (CSS canvas size differs from internal canvas size)
           audioCanvas.height = window.innerHeight;
           audioCanvas.width = window.innerWidth;

           //temp canvas to store rotation data
           var offScreen = document.createElement("canvas"),
           offScreenCtx = offScreen.getContext("2d");


           function wallpaperAudioListener(audioArray) {
                audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);

                if (sessionStorage.getItem("audio-orientation") == "left" ||
                     sessionStorage.getItem("audio-orientation") == "right") {

                     // Render bars along the full height of the canvas
                     var barWidth = Math.round(1.0 / 128.0 * audioCanvas.height);
                     var halfCount = audioArray.length / 2;
                }
                else {
                     // Render bars along the full width of the canvas
                     var barWidth = Math.round(1.0 / 128.0 * audioCanvas.width);
                     var halfCount = audioArray.length / 2;
                }
                // Begin with the left channel in red
                audioCanvasCtx.fillStyle = 'rgb(255,0,0)';
                // Iterate over the first 64 array elements (0 - 63) for the left channel audio data
                for (var i = 0; i < halfCount; i += parseInt(sessionStorage.getItem("bar-amount"))) {
                     // Create an audio bar with its hight depending on the audio volume level of the current frequency
                     var height = audioCanvas.height * Math.min(audioArray[i], 1) * sessionStorage.getItem("bar-height");
                     audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * sessionStorage.getItem("bar-distortion"), barWidth, height);
                }

                // Now draw the right channel in blue
                audioCanvasCtx.fillStyle = 'rgb(0,0,255)';
                // Iterate over the last 64 array elements (64 - 127) for the right channel audio data
                for (var i = halfCount; i < audioArray.length; i += parseInt(sessionStorage.getItem("bar-amount"))) {
                     // Create an audio bar with its hight depending on the audio volume level
                     // Using audioArray[191 - i] here to inverse the right channel for aesthetics
                     var height = audioCanvas.height * Math.min(audioArray[191 - i], 1) * sessionStorage.getItem("bar-height");
                     audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * sessionStorage.getItem("bar-distortion"), barWidth, height);
                }

                if (sessionStorage.getItem("audio-orientation") == "left") {

                     offScreen.width = audioCanvas.width;
                     offScreen.height = audioCanvas.height;
                     offScreenCtx.drawImage(audioCanvas, 0, 0, audioCanvas.width, audioCanvas.height);

                     // Now clear the portion to rotate.
                     audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);

                     audioCanvasCtx.save();
                     // Translate (190/2 is half of the box we drew)
                     audioCanvasCtx.translate(audioCanvas.width, 0);

                     // Rotate it
                     audioCanvasCtx.rotate(90 * Math.PI / 180);

                     // Finally draw the image data from the temp canvas.
                     audioCanvasCtx.translate(audioCanvas.height / 45, -audioCanvas.width / 16);
                     audioCanvasCtx.width = audioCanvasCtx.width * 10;
                     audioCanvasCtx.drawImage(offScreen, 0, 0, audioCanvas.width, audioCanvas.height * 1.9);
                     audioCanvasCtx.restore();
                }
           }


           // Register the audio listener provided by Wallpaper Engine.
           window.wallpaperRegisterAudioListener(wallpaperAudioListener);
      </script>
 </body>

````

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

深白境迁sunset 2025-02-15 09:25:23

主要问题是您正在玩宽度＆amp;画布的高度 - 因此在两个不同的位置 -

 if (sessionStorage.getItem("audio-orientation") == "left" ||
   sessionStorage.getItem("audio-orientation") == "right") {

   var barWidth = Math.round(1.0 / 128.0 * audioCanvas.height);
   var halfCount = audioArray.length / 2;
 } else {
   // Render bars along the full width of the canvas
   var barWidth = Math.round(1.0 / 128.0 * audioCanvas.width);
   var halfCount = audioArray.length / 2;
 }

然后在您最终将临时画布绘制回audiocanvas时。

由于我们只想将图像扩展到可用的空间，如果画布旋转，我们实际上不需要其他barwidth。拉伸是通过反转宽度＆amp;高度。

附带说明 - 目前您正在创建一个新的＆lt; canvas＆gt;元素，每次音频侦听器发射时。那很多。出于绩效原因，我建议在启动时创建一个offscreencanvas或常规画布并重新使用。

这是一个例子：

let settings = {
  "audio-orientation": "left",
  "bar-amount": 1,
  "bar-distortion": 1,
  "bar-height": 1
}
let audioData = [];
for (let a = 0; a < 128; a++) {
  audioData.push((Math.sin(a / 8) + 1) / 2);
}

let audioCanvas = document.getElementById('audioCanvas');

let audioCanvasCtx = audioCanvas.getContext('2d');
audioCanvas.height = window.innerHeight;
audioCanvas.width = window.innerWidth;

var offScreen = document.createElement("canvas");
var offScreenContext = offScreen.getContext("2d");

function wallpaperAudioListener(audioArray) {
  audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);

  var barWidth = Math.round(1.0 / 128.0 * audioCanvas.width);
  var halfCount = audioArray.length / 2;
  audioCanvasCtx.fillStyle = 'rgb(255,0,0)';

  for (var i = 0; i < halfCount; i += parseInt(settings["bar-amount"])) {
    var height = audioCanvas.height * Math.min(audioArray[i], 1) * settings["bar-height"];
    audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * settings["bar-distortion"], barWidth, height);
  }

  audioCanvasCtx.fillStyle = 'rgb(0,0,255)';
  for (var i = halfCount; i < audioArray.length; i += parseInt(settings["bar-amount"])) {
    var height = audioCanvas.height * Math.min(audioArray[191 - i], 1) * settings["bar-height"];
    audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * settings["bar-distortion"], barWidth, height);
  }

  if (settings["audio-orientation"] == "left") {
    offScreen.width = audioCanvas.width;
    offScreen.height = audioCanvas.height;
    offScreenContext.clearRect(0, 0, audioCanvas.width, audioCanvas.height);
    offScreenContext.drawImage(audioCanvas, 0, 0, audioCanvas.width, audioCanvas.height);
    audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);
    audioCanvasCtx.save();
    audioCanvasCtx.translate(audioCanvas.width, 0);
    audioCanvasCtx.rotate(90 * Math.PI / 180);
    audioCanvasCtx.drawImage(offScreen, 0, 0, audioCanvas.height, audioCanvas.width);
    audioCanvasCtx.restore();
  }
}

wallpaperAudioListener(audioData);
<canvas id="audioCanvas"></canvas>

The main problem is that you're playing with the width & height of the canvas - and thus the size of your bars - at two different places:

 if (sessionStorage.getItem("audio-orientation") == "left" ||
   sessionStorage.getItem("audio-orientation") == "right") {

   var barWidth = Math.round(1.0 / 128.0 * audioCanvas.height);
   var halfCount = audioArray.length / 2;
 } else {
   // Render bars along the full width of the canvas
   var barWidth = Math.round(1.0 / 128.0 * audioCanvas.width);
   var halfCount = audioArray.length / 2;
 }

and later on as you finally draw the temporary canvas back to audioCanvas.

As we simply want to stretch the image to the available space if the canvas is rotated, we don't actually need a different barWidth. The stretching is happening at the drawImage() call by reversing the width & height.

As a side note - at the moment you're creating a new <canvas> element each time the audio listener fires. That's quite a lot. For performance reasons I'd recommend creating an OffscreenCanvas or a regular canvas once at startup and re-use that.

Here's an example:

let settings = {
  "audio-orientation": "left",
  "bar-amount": 1,
  "bar-distortion": 1,
  "bar-height": 1
}
let audioData = [];
for (let a = 0; a < 128; a++) {
  audioData.push((Math.sin(a / 8) + 1) / 2);
}

let audioCanvas = document.getElementById('audioCanvas');

let audioCanvasCtx = audioCanvas.getContext('2d');
audioCanvas.height = window.innerHeight;
audioCanvas.width = window.innerWidth;

var offScreen = document.createElement("canvas");
var offScreenContext = offScreen.getContext("2d");

function wallpaperAudioListener(audioArray) {
  audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);

  var barWidth = Math.round(1.0 / 128.0 * audioCanvas.width);
  var halfCount = audioArray.length / 2;
  audioCanvasCtx.fillStyle = 'rgb(255,0,0)';

  for (var i = 0; i < halfCount; i += parseInt(settings["bar-amount"])) {
    var height = audioCanvas.height * Math.min(audioArray[i], 1) * settings["bar-height"];
    audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * settings["bar-distortion"], barWidth, height);
  }

  audioCanvasCtx.fillStyle = 'rgb(0,0,255)';
  for (var i = halfCount; i < audioArray.length; i += parseInt(settings["bar-amount"])) {
    var height = audioCanvas.height * Math.min(audioArray[191 - i], 1) * settings["bar-height"];
    audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * settings["bar-distortion"], barWidth, height);
  }

  if (settings["audio-orientation"] == "left") {
    offScreen.width = audioCanvas.width;
    offScreen.height = audioCanvas.height;
    offScreenContext.clearRect(0, 0, audioCanvas.width, audioCanvas.height);
    offScreenContext.drawImage(audioCanvas, 0, 0, audioCanvas.width, audioCanvas.height);
    audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);
    audioCanvasCtx.save();
    audioCanvasCtx.translate(audioCanvas.width, 0);
    audioCanvasCtx.rotate(90 * Math.PI / 180);
    audioCanvasCtx.drawImage(offScreen, 0, 0, audioCanvas.height, audioCanvas.width);
    audioCanvasCtx.restore();
  }
}

wallpaperAudioListener(audioData);
<canvas id="audioCanvas"></canvas>

回复 原文
~没有更多了~

关于作者

何时共饮酒

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_giMRmwQ3mK

文章 0 评论 0

爱她像谁

文章 0 评论 0

清风疏影

文章 0 评论 0

mb_OO8gCSDD

文章 0 评论 0

佚名

文章 0 评论 0

汹涌人海

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文