帆布拉伸，而不是種植和啓動位置

Question

我買了它的一些下降紙屑畫布，我onscroll改變其高度與這個jQuery：

$(window).on("scroll touchmove", function() { 
    $('#world').toggleClass('tiny', $(document).scrollTop() > 0); 
}); 

但畫布一下就strechted而不是裁剪等等五彩紙屑看起來很奇怪。 這是我的紙屑：

(function() { 
    var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos; 

    NUM_CONFETTI = 350; 
    COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]]; 
    PI_2 = 2 * Math.PI; 
    canvas = document.getElementById("world"); 
    context = canvas.getContext("2d"); 
    window.w = 0; 
    window.h = 0; 
    resizeWindow = function() { 
    window.w = canvas.width = window.innerWidth; 
    return window.h = canvas.height = window.innerHeight; 
    }; 
    window.addEventListener('resize', resizeWindow, false); 
    window.onload = function() { 
    return setTimeout(resizeWindow, 0); 
    }; 
    range = function(a, b) { 
    return (b - a) * Math.random() + a; 
    }; 
    drawCircle = function(x, y, r, style) { 
    context.beginPath(); 
    context.arc(x, y, r, 0, PI_2, false); 
    context.fillStyle = style; 
    return context.fill(); 
    }; 
    xpos = 0.5; 
    document.onmousemove = function(e) { 
    return xpos = e.pageX/w; 
    }; 
    window.requestAnimationFrame = (function() { 
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { 
     return window.setTimeout(callback, 1000/60); 
    }; 
    })(); 
    Confetti = (function() { 
    function Confetti() { 
     this.style = COLORS[~~range(0, 5)]; 
     this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2]; 
     this.r = ~~range(2, 6); 
     this.r2 = 2 * this.r; 
     this.replace(); 
    } 
    Confetti.prototype.replace = function() { 
     this.opacity = 0; 
     this.dop = 0.03 * range(1, 4); 
     this.x = range(-this.r2, w - this.r2); 
     this.y = range(-20, h - this.r2); 
     this.xmax = w - this.r; 
     this.ymax = h - this.r; 
     this.vx = range(0, 2) + 8 * xpos - 5; 
     return this.vy = 0.7 * this.r + range(-1, 1); 
    }; 
    Confetti.prototype.draw = function() { 
     var ref; 
     this.x += this.vx; 
     this.y += this.vy; 
     this.opacity += this.dop; 
     if (this.opacity > 1) { 
     this.opacity = 1; 
     this.dop *= -1; 
     } 
     if (this.opacity < 0 || this.y > this.ymax) { 
     this.replace(); 
     } 
     if (!((0 < (ref = this.x) && ref < this.xmax))) { 
     this.x = (this.x + this.xmax) % this.xmax; 
     } 
     return drawCircle(~~this.x, ~~this.y, this.r, this.rgb + "," + this.opacity + ")"); 
    }; 
    return Confetti; 
    })(); 
    confetti = (function() { 
    var j, ref, results; 
    results = []; 
    for (i = j = 1, ref = NUM_CONFETTI; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) { 
     results.push(new Confetti); 
    } 
    return results; 
    })(); 
    window.step = function() { 
    var c, j, len, results; 
    requestAnimationFrame(step); 
    context.clearRect(0, 0, w, h); 
    results = []; 
    for (j = 0, len = confetti.length; j < len; j++) { 
     c = confetti[j]; 
     results.push(c.draw()); 
    } 
    return results; 
    }; 
    step(); 
}).call(this); 

而另一個問題是，五彩紙屑開始從上方落下。但我希望他們已經填滿整個畫布。這可能以某種方式嗎？

Answer 1

的問題是，當你的畫布是試圖檢測window.resize事件，動畫不改變窗口的大小。相反，它只是縮小畫布的包裝，這使動畫變得怪異。我認爲你必須做的就是添加overflow: hidden;到畫布的容器的CSS，這樣，當它改變大小，畫布裏面可以（通過其在畫布上height: __px;規則）保留其大小。

希望這有助於：JSFiddle demo

你或許可以刪除偵聽window.resize。

編輯 - overflow: hidden;不起作用：

只需刪除該規則position: fixed;並從畫布height: 100%;。在頁面加載時，畫布已經調整到正確的大小並保持在正確的位置。固定位置的元素將顯示在靜態位置的元素上。刪除這兩種樣式，一切都應該像在JSFiddle中一樣工作。