12

我试图让这个雨滴画布脚本占据 100% 的宽度和高度，但我似乎没有做任何事情。我尝试更改画布区域中的 CSS 和高度/宽度，但它要么没有改变任何东西，要么根本无法工作。有一次我尝试了一种实际上使它变成全尺寸的东西，它似乎对雨滴有一种奇怪的效果，它们变得模糊不清而且大得多，所以它一定是实际上拉伸了画布而不是让它变大。这是默认 800x800 像素画布的代码。

风格

<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>

画布脚本

<script type="text/javascript">
var canvas = null;
var context = null;
var bufferCanvas = null;
var bufferCanvasCtx = null;
var flakeArray = [];
var flakeTimer = null;
var maxFlakes = 200; // Here you may set max flackes to be created 

function init() {
    canvas = document.getElementById('canvasRain');
    context = canvas.getContext("2d");

    bufferCanvas = document.createElement("canvas");
    bufferCanvasCtx = bufferCanvas.getContext("2d");
    bufferCanvasCtx.canvas.width = context.canvas.width;
    bufferCanvasCtx.canvas.height = context.canvas.height;


    flakeTimer = setInterval(addFlake, 200);

    Draw();

    setInterval(animate, 30);

}
function animate() {

    Update();
    Draw();

}
function addFlake() {

    flakeArray[flakeArray.length] = new Flake();
    if (flakeArray.length == maxFlakes)
        clearInterval(flakeTimer);
}
function blank() {
    bufferCanvasCtx.fillStyle = "rgba(0,0,0,0.8)";
    bufferCanvasCtx.fillRect(0, 0, bufferCanvasCtx.canvas.width, bufferCanvasCtx.canvas.height);

}
function Update() {
    for (var i = 0; i < flakeArray.length; i++) {
        if (flakeArray[i].y < context.canvas.height) {
            flakeArray[i].y += flakeArray[i].speed;
            if (flakeArray[i].y > context.canvas.height)
                flakeArray[i].y = -5;
            flakeArray[i].x += flakeArray[i].drift;
            if (flakeArray[i].x > context.canvas.width)
                flakeArray[i].x = 0;
        }
    }

}
function Flake() {
    this.x = Math.round(Math.random() * context.canvas.width);
    this.y = -10;
    this.drift = Math.random();
    this.speed = Math.round(Math.random() * 5) + 1;
    this.width = (Math.random() * 3) + 2;
    this.height = this.width;
}
function Draw() {
    context.save();

    blank();

    for (var i = 0; i < flakeArray.length; i++) {
        bufferCanvasCtx.fillStyle = "white";
        bufferCanvasCtx.fillRect(flakeArray[i].x, flakeArray[i].y, flakeArray[i].width, flakeArray[i].height);
    }


    context.drawImage(bufferCanvas, 0, 0, bufferCanvas.width, bufferCanvas.height);
    context.restore();
}

</script>

最后是身体

<body onload="init()">
  <canvas  id="canvasRain" width="800px" height="800px">Canvas Not Supported</canvas>
</body>
4

2 回答 2

17

body, #canvasRain {width:100%; height:100%; margin:0px;}将正确设置您的尺寸，但您的问题是您用于绘制的画布高度/宽度在使用px%'s 设置时没有获取正确的值。这就是缩放与模糊薄片一起出现的地方。它需要一些默认的画布大小并拉伸到 100% 的视图。添加类似的东西

bufferCanvas.width = canvas.width = window.innerWidth;
bufferCanvas.height = canvas.height = window.innerHeight;

似乎可以解决问题。您可能希望/需要处理调整大小事件以重新计算它。这是一个示例。我无法让 jsFiddle 为我工作，所以这就是全部。

于 2013-10-29T19:54:12.483 回答
1

我设置了一个小提琴，展示了如何使用一些简单的 CSS 来调整画布的大小。

http://jsfiddle.net/C7LfU/1/

$('#canvasRain').css({
   "height": window.innerHeight,
   "width": window.innerWidth
});

我还继续更新了您的动画以使用 requestAnimationFrame。这可能是导致您的 Flakes 模糊的原因：动画滞后，因为setTimeout没有缩放到浏览器实际准备好绘制另一帧的时间。

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

function animate() {
    requestAnimFrame(animate);
    Update();
    Draw();
}

阅读更多关于为什么应该使用 requestAnimationFrame 的信息：http: //www.paulirish.com/2011/requestanimationframe-for-smart-animating/

于 2013-10-29T20:04:02.307 回答