使用 HTML 5 画布自动滚动答案

【问题标题】：Automatic scroll with HTML 5 canvas使用 HTML 5 画布自动滚动
【发布时间】：2014-05-30 14:47:28
【问题描述】：

我遇到了与 HTML 5 画布动画相关的问题。
我刚刚编写了整个代码，它的作用是一个框不断向下移动并超过网页的高度，因为滚动选项来了，因此我必须向下滚动才能看到框在哪里。
所以我的问题是：当框向下移动时，是否有任何方法可以自动帮助用户仅通过该动画向下滚动？这意味着当框向下移动时，它也会向下滚动，这有助于用户显示框的移动位置。如果涉及到背景，那么它就在那里，它只是一个示例。

小提琴在这里： http://jsfiddle.net/gamealchemist/MLHQK/ 我尝试使用背景滚动，但这也不起作用......！

代码是：

css

  body {
    margin: 0px;
    padding: 0px;
  }

html

<canvas id="myCanvas" width="578" height="1000"></canvas>

javascript

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

function drawRectangle(myRectangle, context) {
    context.beginPath();
    context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
    context.fillStyle = '#8ED6FF';
    context.fill();
    context.lineWidth = myRectangle.borderWidth;
    context.strokeStyle = 'black';
    context.stroke();
}

function animate(myRectangle, canvas, context, startTime) {
    // update
    var time = Date.now() - startTime;

    // pixels / second^2
    var gravity = 200;

    myRectangle.y = 0.5 * gravity * Math.pow(time / 1000, 2);

    if (myRectangle.y > canvas.height - myRectangle.height - myRectangle.borderWidth / 2) {
        myRectangle.y = canvas.height - myRectangle.height - myRectangle.borderWidth / 2;
    }
    lastTime = time;

    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);

    // draw
    drawRectangle(myRectangle, context);

    // request new frame
    requestAnimFrame(function () {
        animate(myRectangle, canvas, context, startTime);
    });
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var myRectangle = {
    x: 239,
    y: 0,
    width: 100,
    height: 50,
    borderWidth: 5
};

drawRectangle(myRectangle, context);

// wait one second before dropping rectangle
setTimeout(function () {
    var startTime = (new Date()).getTime();
    animate(myRectangle, canvas, context, startTime);
}, 2000);

【问题讨论】：

拥有一个仅使用 window.innerHeight 的画布并滚动（翻译）您的上下文以便您可以看到您的正方形会更合乎逻辑。但是你必须添加某种背景，这样我们才能看到正方形在移动。我从你的代码中做了一个小提琴：jsfiddle.net/gamealchemist/MLHQK
好吧，稍后我会添加一些背景......但我仍然无法做到。我刚刚看到你的小提琴，但它仍然没有滚动。 :|
小提琴只是在这里帮助你和 S.O.人们了解问题/提出解决方案。将这样的小提琴加入帖子是一个好习惯。事实上，在空白背景下“滚动”是没有意义的。你必须做很多工作才能让背景+一些实体+相机管理工作。对我来说，您的问题虽然很有趣，但与成为有效 S.O. 的解决方案相去甚远。问题，我建议你删除它或S.O.人们把它关闭得太宽泛了。
我确实明白了你想说的所有观点，如果我们想要任何背景，我们可以把它像任何东西一样，届时也会有一些文字向他们展示就像移动一样不是一个大问题，但关键是如何做相机工作，这是我的问题......因为我有兴趣这样做，这段代码只是一个例子......
-1。所以。不是将想法转化为代码。您的问题实际上是一个“为我做”的问题。寻求教程，努力工作，如果你遇到真正的问题阻碍你的尝试，请回到这里。在 google 的 5 个第一个结果中（30 秒搜索）：bdadam.com/blog/… 现在我已经解释完了，祝你好运。

标签： javascript css html canvas

【解决方案1】：

将此添加到您的 animate 函数将解决问题

delay = 100;
// scroll
if( myRectangle.y - delay > 0 )
    window.scrollTo( 0, myRectangle.y - delay );

这是我根据您的代码制作的示例，其中我还添加了背景图片，因此您可以看到框正确移动。

<!DOCTYPE html>
<html>
<head>
<script>
    window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();

    function drawRectangle(myRectangle, context) {
        context.beginPath();
        context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
        context.fillStyle = '#8ED6FF';
        context.fill();
        context.lineWidth = myRectangle.borderWidth;
        context.strokeStyle = 'black';
        context.stroke();
    }

    function animate(myRectangle, canvas, context, startTime) {
        // update
        var time = Date.now() - startTime;

        // pixels / second^2
        var gravity = 200;

        myRectangle.y = 0.5 * gravity * Math.pow(time / 1000, 2);

        if (myRectangle.y > canvas.height - myRectangle.height - myRectangle.borderWidth / 2) {
            myRectangle.y = canvas.height - myRectangle.height - myRectangle.borderWidth / 2;
        }
        lastTime = time;

        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);

        // draw
        drawRectangle(myRectangle, context);

        delay = 100;
        // scroll
        if( myRectangle.y - delay > 0 )
            window.scrollTo( 0, myRectangle.y - delay );

        // request new frame
        requestAnimFrame(function () {
            animate(myRectangle, canvas, context, startTime);
        });
    }

    function load(){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        var myRectangle = {
            x: 239,
            y: 0,
            width: 100,
            height: 50,
            borderWidth: 5
        };

        drawRectangle(myRectangle, context);

        // wait one second before dropping rectangle
        setTimeout(function () {
            var startTime = (new Date()).getTime();
            animate(myRectangle, canvas, context, startTime);
        }, 2000);
    }
</script>
</head>
<body background="http://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast,_Dhaka,_Bangladesh.JPG" style="margin: 0px;padding: 0px;" onload="load();">
    <canvas id="myCanvas" width="578" height="5000"></canvas>
</body>
</html>

【讨论】：