調整屏幕大小時，如何使 canvas 元素響應？

Question

我的站點上有 Matrix canvas，當我更改視口的寬度時，響應性出現問題，canvas 無法更新以適應。

https://codepen.io/ems-sin/pen/zYjpree

HTML
<canvas id="bglitch" ></canvas> 
CSS
    *{
 margin:0;
  background-color:#010b13;
  overflow: hidden;
}
#bglitch{
  opacity: 0.5;
  z-index: -10;
  top: 0;
  right:0;
}
Javascript
var bglitch = document.getElementById("bglitch");
    var ctx = bglitch.getContext("2d");
    bglitch.height = window.innerHeight;
    bglitch.width = window.innerWidth;
    var matrix = "アィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶヷヸヹヺ・ーヽ";
    matrix = matrix.split("");
    var font_size = 24;
    var columns = bglitch.width/font_size;
    var drops = [];
    for(var x = 0; x < columns; x++)
        drops[x] = 1; 
    function draw()
    {
        ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
        ctx.fillRect(0, 0, bglitch.width, bglitch.height);
        ctx.fillStyle = "#f4427d";
        ctx.font = font_size + "px arial";
        for(var i = 0; i < drops.length; i++){
            var text = matrix[Math.floor(Math.random()*matrix.length)];
            ctx.fillText(text, i*font_size, drops[i]*font_size);
            if(drops[i]*font_size > bglitch.height && Math.random() > 0.975)
                drops[i] = 0;
            drops[i]++;
        }
    }

    setInterval(draw, 35);

Answer 1

您需要添加調整大小事件偵聽器並相應地重新計算列。

在 javascript 的末尾添加這個

window.addEventListener('resize', () => {
  bglitch.height = window.innerHeight;
  bglitch.width = window.innerWidth;
  
  var columns = bglitch.width/font_size;
  for(var x = 0; x < columns; x++) drops[x] = 1; 
})

完全工作調整大小

 var bglitch = document.getElementById("bglitch"); var ctx = bglitch.getContext("2d"); bglitch.height = window.innerHeight; bglitch.width = window.innerWidth; var matrix = "アィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶヷヸヹヺ・ーヽ"; matrix = matrix.split(""); var font_size = 24; var columns = bglitch.width/font_size; var drops = []; for(var x = 0; x < columns; x++) drops[x] = 1; function draw() { ctx.fillStyle = "rgba(0, 0, 0, 0.04)"; ctx.fillRect(0, 0, bglitch.width, bglitch.height); ctx.fillStyle = "#f4427d"; ctx.font = font_size + "px arial"; for(var i = 0; i < drops.length; i++){ var text = matrix[Math.floor(Math.random()*matrix.length)]; ctx.fillText(text, i*font_size, drops[i]*font_size); if(drops[i]*font_size > bglitch.height && Math.random() > 0.975) drops[i] = 0; drops[i]++; } } setInterval(draw, 35); window.addEventListener('resize', () => { bglitch.height = window.innerHeight; bglitch.width = window.innerWidth; var columns = bglitch.width/font_size; for(var x = 0; x < columns; x++) drops[x] = 1; })

 *{ margin:0; background-color:#010b13; overflow: hidden; } #bglitch{ opacity: 0.5; z-index: -10; top: 0; right:0; }

 <canvas id="bglitch" ></canvas>

將代碼分成函數是更好的做法。 例如 init() function 設置所有初始變量並運行 function 將運行 setTimeout 等等。

 let bgData = { element: undefined, g: undefined, matrix: "アィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶヷヸヹヺ・ーヽ".split(''), fontSize: 24, columns: undefined, drops: [], }; function init() { bgData.element = document.getElementById("bglitch"); bgData.g = bgData.element.getContext("2d"); resize(); window.addEventListener('resize', resize) } function resize() { bgData.element.height = window.innerHeight; bgData.element.width = window.innerWidth; bgData.columns = bgData.element.width / bgData.fontSize; for(let x = 0; x < bgData.columns; x++) bgData.drops[x] = 1; } function draw() { bgData.g.fillStyle = "rgba(0, 0, 0, 0.04)"; bgData.g.fillRect(0, 0, bgData.element.width, bgData.element.height); bgData.g.fillStyle = "#f4427d"; bgData.g.font = bgData.fontSize + "px arial"; for(let i = 0; i < bgData.drops.length; i++) { const text = bgData.matrix[Math.floor(Math.random()*bgData.matrix.length)]; bgData.g.fillText(text, i * bgData.fontSize, bgData.drops[i] * bgData.fontSize); if(bgData.drops[i] * bgData.fontSize > bgData.element.height && Math.random() > 0.975) bgData.drops[i] = 0; bgData.drops[i]++; } } let interval; function stop() { clearInterval(interval); window.removeEventListener('resize', resize) } function run() { stop(); init(); interval = setInterval(draw, 35); } run();

 *{ margin:0; background-color:#010b13; overflow: hidden; } #bglitch{ opacity: 0.5; z-index: -10; top: 0; right:0; }

 <canvas id="bglitch" ></canvas>

Answer 2

你需要將你的代碼變成一個 function ，它會在 resize 事件中被調用，以便更新尺寸。

此代碼段還會在開始另一個時間間隔之前清除當前時間間隔（如果有的話）。

 <style> <canvas id="bglitch"></canvas> </style> <canvas id="bglitch"></canvas> <script> var bglitch = document.getElementById("bglitch"); var ctx = bglitch.getContext("2d"); let timer = ''; function init() { bglitch.height = window.innerHeight; bglitch.width = window.innerWidth; var matrix = "アィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶヷヸヹヺ・ーヽ"; matrix = matrix.split(""); var font_size = 24; var columns = bglitch.width / font_size; var drops = []; for (var x = 0; x < columns; x++) drops[x] = 1; function draw() { ctx.fillStyle = "rgba(0, 0, 0, 0.04)"; ctx.fillRect(0, 0, bglitch.width, bglitch.height); ctx.fillStyle = "#f4427d"; ctx.font = font_size + "px arial"; for (var i = 0; i < drops.length; i++) { var text = matrix[Math.floor(Math.random() * matrix.length)]; ctx.fillText(text, i * font_size, drops[i] * font_size); if (drops[i] * font_size > bglitch.height && Math.random() > 0.975) drops[i] = 0; drops[i]++; } } clearInterval(timer); timer = setInterval(draw, 35); } window.onresize = init; window.onload = init; </script>