調整大小功能畫布加載在縮小的瀏覽器和擴大

Question

我是一個JavaScript初學者，但我設法做了一個簡單的函數，創建一個動畫畫布。

var w = c.width = window.innerWidth, 
    h = c.height = window.innerHeight, 
    ctx = c.getContext('2d'), 

    spawnProb = 1, 
    numberOfMoves = [8, 16], //[min, max] 
    distance = [50, 200], 
    attenuator = 900, 
    timeBetweenMoves = [6, 10], 
    size = [.5, 3], 

    lines = [], 
    frame = (Math.random() * 360) | 0; 

function rand(ar) { 
    return Math.random() * (ar[1] - ar[0]) + ar[0]; 
} 

function Line() { 
    this.x = Math.random() * w; 
    this.y = Math.random() * h; 
    this.vx = this.vy = 0; 
    this.last = {}; 
    this.target = {}; 
    this.totalMoves = rand(numberOfMoves); 
    this.move = 0; 
    this.timeBetweenMoves = rand(timeBetweenMoves); 
    this.timeSpentThisMove = this.timeBetweenMoves; 
    this.distance = rand(distance); 

    this.color = 'hsl(hue, 80%, 50%)'.replace('hue', frame % 360); 

    this.size = rand(size); 
} 
Line.prototype.use = function() { 
    ++this.timeSpentThisMove; 
    if (this.timeSpentThisMove >= this.timeBetweenMoves) { 
    ++this.move; 
    this.timeSpentThisMove = 0; 

    var rad = Math.random() * 2 * Math.PI; 
    this.target.x = this.x + Math.cos(rad) * this.distance; 
    this.target.y = this.y + Math.sin(rad) * this.distance; 
    } 

    this.last.x = this.x; 
    this.last.y = this.y; 

    this.vx += (this.x - this.target.x)/attenuator; 
    this.vy += (this.y - this.target.y)/attenuator; 

    this.x += this.vx; 
    this.y += this.vy; 

    ctx.lineWidth = this.size; 
    ctx.strokeStyle = ctx.shadowColor = this.color; 
    ctx.beginPath(); 
    ctx.moveTo(this.last.x, this.last.y); 
    ctx.lineTo(this.x, this.y); 
    ctx.stroke(); 
} 

function anim() { 
    window.requestAnimationFrame(anim); 

    ++frame; 

    ctx.shadowBlur = 0; 
    ctx.fillStyle = 'rgba(0, 0, 0, .04)'; 
    ctx.fillRect(0, 0, w, h); 
    ctx.shadowBlur = 20; 

    if (Math.random() < spawnProb) lines.push(new Line); 

    for (var i = 0; i < lines.length; ++i) { 
    lines[i].use(); 

    if (lines[i].move >= lines[i].totalMoves) { 
     lines.splice(i, 1); 
     --i; 
    } 
    } 
} 
anim(); 

這是結果

然而，當我縮小瀏覽器到手機大小，然後展開它恢復正常，它看起來像這樣：

我正在嘗試實現調整大小功能和事件偵聽器：

// Event handling 
    function addListeners() { 
     // window.addEventListener('resize', resize); 
    } 

    function resize() { 
     w = window.innerWidth; 
     h = window.innerHeight; 
     largeHeader.style.height = h+'px'; 
     canvas.width = w; 
     canvas.height = h; 
    } 

並在anim（）之前調用它;但沒有運氣....

我該如何解決這個問題？

Answer 1

您只需將事件偵聽器中的canvas更改爲c;

http://jsbin.com/zigoto/1/edit?js,output

var c = document.getElementById('c'), 
 
    largeHeader = document.getElementById('h'); 
 

 
var w = c.width = window.innerWidth, 
 
    h = c.height = window.innerHeight, 
 
    ctx = c.getContext('2d'), 
 

 
    spawnProb = 1, 
 
    numberOfMoves = [8, 16], //[min, max] 
 
    distance = [50, 200], 
 
    attenuator = 900, 
 
    timeBetweenMoves = [6, 10], 
 
    size = [0.5, 3], 
 

 
    lines = [], 
 
    frame = (Math.random() * 360) | 0; 
 

 
function rand(ar) { 
 
    return Math.random() * (ar[1] - ar[0]) + ar[0]; 
 
} 
 

 
function Line() { 
 
    this.x = Math.random() * w; 
 
    this.y = Math.random() * h; 
 
    this.vx = this.vy = 0; 
 
    this.last = {}; 
 
    this.target = {}; 
 
    this.totalMoves = rand(numberOfMoves); 
 
    this.move = 0; 
 
    this.timeBetweenMoves = rand(timeBetweenMoves); 
 
    this.timeSpentThisMove = this.timeBetweenMoves; 
 
    this.distance = rand(distance); 
 

 
    this.color = 'hsl(hue, 80%, 50%)'.replace('hue', frame % 360); 
 

 
    this.size = rand(size); 
 
} 
 
Line.prototype.use = function() { 
 
    ++this.timeSpentThisMove; 
 
    if (this.timeSpentThisMove >= this.timeBetweenMoves) { 
 
    ++this.move; 
 
    this.timeSpentThisMove = 0; 
 

 
    var rad = Math.random() * 2 * Math.PI; 
 
    this.target.x = this.x + Math.cos(rad) * this.distance; 
 
    this.target.y = this.y + Math.sin(rad) * this.distance; 
 
    } 
 

 
    this.last.x = this.x; 
 
    this.last.y = this.y; 
 

 
    this.vx += (this.x - this.target.x)/attenuator; 
 
    this.vy += (this.y - this.target.y)/attenuator; 
 

 
    this.x += this.vx; 
 
    this.y += this.vy; 
 

 
    ctx.lineWidth = this.size; 
 
    ctx.strokeStyle = ctx.shadowColor = this.color; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(this.last.x, this.last.y); 
 
    ctx.lineTo(this.x, this.y); 
 
    ctx.stroke(); 
 
}; 
 

 
function anim() { 
 
    window.requestAnimationFrame(anim); 
 

 
    ++frame; 
 

 
    ctx.shadowBlur = 0; 
 
    ctx.fillStyle = 'rgba(0, 0, 0, .04)'; 
 
    ctx.fillRect(0, 0, w, h); 
 
    ctx.shadowBlur = 20; 
 

 
    if (Math.random() < spawnProb) lines.push(new Line()); 
 

 
    for (var i = 0; i < lines.length; ++i) { 
 
    lines[i].use(); 
 

 
    if (lines[i].move >= lines[i].totalMoves) { 
 
     lines.splice(i, 1); 
 
     --i; 
 
    } 
 
    } 
 
} 
 
anim(); 
 

 
function resize() { 
 
    w = window.innerWidth; 
 
    h = window.innerHeight; 
 
    c.width = w; 
 
    c.height = h; 
 
} 
 

 
window.addEventListener('resize', resize);

html, body { 
 
    overflow: hidden; 
 
    width: 100%; height: 100%; 
 
} 
 
h1 { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    color: white; 
 
    transform: translate(-50%, -50%) 
 
}

<canvas id="c"></canvas> 
 
<h1>HACKING</h1>