自动滚动与HTML 5画布

Automatic scroll with HTML 5 canvas

本文关键字：HTML 5画布 滚动      更新时间：2023-09-26

我有问题相关的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);

将此添加到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>
相关文章：