Question

我试图让这个雨滴画布脚本占据100％的宽度和高度，但我似乎没有做任何事情。我尝试在Canvas区域中更改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>

Answer 1

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

的内容

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

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

Answer 2

我已经设置了一个小提琴，展示了如何使用一些简单的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(); }不会缩放。

{{1}}

在http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

上阅读更多有关您应该使用requestAnimationFrame的信息

HTML5 Canvas 100％高度和宽度

2 个答案: