Question

我正在尝试在canvas上创建水滴下降效果。我使用array创建了一些样本滴。为它设置动画我的意思是改变它们的位置我引入了一个setTimeout函数。它适用于单个水滴。因为有多个滴在我的画布上，它不再工作.drops仍然是静止的。如果setTimeout函数可以用来为所有单个动画制作动画？

这里是小提琴jsfiddle

单个放置single drop animation

的动画效果

<html>
<head>
</head>
<body>
<script>
function makeit(){
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext('2d');
canvas.width=600;
canvas.height=600;
canvas.style.border="1px solid black";

var drop=function (x,y){
ctx.save();

ctx.fillStyle="orange";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fill();

ctx.fillStyle="red";
ctx.moveTo(x-5,y);
ctx.lineTo(x,y-7);
ctx.lineTo(x+5,y);
ctx.arc(x,y,5,0,Math.PI);

ctx.closePath();

ctx.fill();
ctx.restore();
y=y+3;
if(y==canvas.height){
y=0;
}

var m=setTimeout('drop('+x+','+y+')',20);

}

var xpos=[10,20,30,40,50,60,70,70,76];
var ypos=[30,20,60,80,76,90,30,40,79];
for(i=0;i<xpos.length;i++){
drop(xpos[i],ypos[i]);

}

}
 window.onload=makeit;
</script>
<canvas id="mycanvas" ></canvas>



</body>
</html>

Answer 1

以下是我要做的事情：

function makeit() {
    // These variables can be used in the drawing functions
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext('2d');
    var drops = [];

    // Init canvas & drops
    init();

    // Make the 3rd drop falls
    var fall = setInterval(function () {
        updateDrop(3);
    }, 200);

    // Make the 7th drop falls
    var fall2 = setInterval(function () {
        updateDrop(7);
    }, 400);

    // Stop the 3rd drop at anytime with this code :
    // clearInterval(fall);


    // Functions
    function init() {
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.border = "1px solid black";
        // Draw background
        drawBackground();
        // Draw drops
        var xpos = [10, 20, 30, 40, 50, 60, 70, 70, 76];
        var ypos = [30, 20, 60, 80, 76, 90, 30, 40, 79];
        for (i = 0; i < xpos.length; i++) {
            drops.push(drawDrop(xpos[i], ypos[i]));
        }
    }

    function drawBackground() {
        ctx.fillStyle = "orange";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fill();
    }

    function drawDrop(x, y) {
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.moveTo(x - 5, y);
        ctx.lineTo(x, y - 7);
        ctx.lineTo(x + 5, y);
        ctx.arc(x, y, 5, 0, Math.PI);
        ctx.closePath();
        ctx.fill();

        return {
            'x': x,
                'y': y
        };
    }

    function updateDrop(dropNumber) {
        var dropNumber = dropNumber - 1; //Because 0 is first
        // Update position        
        if (drops[dropNumber].y >= canvas.height) {
            drops[dropNumber].y = 0;
        } else {
            drops[dropNumber].y += 3;
        }
        //Draw background
        drawBackground();
        //Draw drops
        for (i = 0; i < drops.length; i++) {
            drawDrop(drops[i].x, drops[i].y);
        }
    }

}
window.onload = makeit;

然后，如果你想阻止掉落的第三滴，你可以执行这一行：

clearInterval(fall);

只需看看JSFiddle：http://jsfiddle.net/Oliboy50/QHRaS/5/

在画线之前不要忘记ctx.beginPath()，否则你将无法清除它们。

Answer 2

这是使用window.requestAnimationFrame为您的广告素材设置动画的另一个选项：

定义一个Drop伪类，它知道它的x，y位置及其下降的速度
添加Drop方法重绘画布上的拖放并增加其Y值以使其下降。
使用window.requestAnimationFrame创建一个动画循环，以（1）通过填充橙色背景来清除画布，（2）使每个掉落，（3）重绘画布上的每个拖放。

带注释的代码和演示：http://jsfiddle.net/m1erickson/m8UPC/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // a flag to let you stop the animation
    var ok2animate=true;


    // a Drop pseudo-class
    // Properties: current x,y & the speed at which this drop falls
    function Drop(){
        this.x=Math.random()*(canvas.width-20);
        this.y=-Math.random()*20;
        this.fallRate=1;
    }
    // draw this drop on the canvas
    Drop.prototype.draw=function(){
        ctx.beginPath();
        ctx.moveTo(this.x-5,this.y);
        ctx.lineTo(this.x,this.y-7);
        ctx.lineTo(this.x+5,this.y);
        ctx.arc(this.x,this.y,5,0,Math.PI);
        ctx.closePath();
        ctx.fill();
        return(this);    
    }
    // make this drop "fall" 
    Drop.prototype.fall=function(){
        this.y+=this.fallRate;
        return(this);
    }

    // an animation loop to make some test drops fall 
    function animate(){

        // request another animation frame
        if(ok2animate){
            requestAnimationFrame(animate);
        }

        // fill the canvas with the orange background
        ctx.fillStyle="orange";
        ctx.fillRect(0,0,canvas.width,canvas.height)

        // make all drops fall and then redraw them
        ctx.fillStyle="red";
        for(var i=0;i<drops.length;i++){
            drops[i].fall().draw();
        }

    }

    // let the user stop the animation
    $("#stop").click(function(){
        ok2animate=false;
    });



    // an array of objects each representing 1 drop
    var drops=[];

    // add some test drops
    for(var i=0;i<10;i++){
        drops.push(new Drop());    
    }

    // start the animation
    requestAnimationFrame(animate);


}); // end $(function(){});
</script>
</head>
<body>
    <button id="stop">Stop</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

在html画布上下雨动画

2 个答案: