Question

我通过获取用户输入的大小和颜色来创建一个canvas元素。我想让画布不断地在页面上下移动。我怎样才能做到这一点？以下是html文件：

<!DOCTYPE html>
    <html>
    <body>
        <script src="pol.js" >
        </script>
    </body>
    </html>

以下是javascript文件“pol.js”：

var h=prompt("Provide length of square");
var col=prompt("Provide the color");
document.write('<div id="float" ><canvas id="myCanvas" width="'+h+'" height="'+h+'" style="border:1px solid #c3c3c3;"> </canvas> </div>');
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle=col;
ctx.fillRect(0,0,h,h);

Answer 1

以下CSS应该在页面顶部和500px之间平滑地移动canvas元素：

<style type="text/css">
    @keyframes moveabout {
        from { top: 0px; }
        to   { top: 500px; }
    }
    #float {
        position: absolute;
        animation: moveabout 5s ease-in-out infinite alternate;
    }
</style>

了解更多信息： http://www.w3schools.com/css/css3_animations.asp

如果要将元素从页面的顶部移动到底部，可以使用document.windowHeight来获取窗口的视口高度。

上下移动画布 - html5 / css3

1 个答案: