Question

我正在尝试这样做，当用户点击屏幕上的任意位置时，点击时会出现一个圆圈，然后继续增长。如果可能的话，我不想使用jQuery。我做了一个JSFiddle：http://jsfiddle.net/VZ8R4/

我认为错误发生在circ（）函数中：

function circ(x, y, rad, c){    
    ctx.beginPath();
    ctx.arc(x, y, rad, 0, 2 * Math.PI, false);

    ctx.lineWidth = 5;
    ctx.strokeStyle = c;
    ctx.stroke();
    function2();
    function function2(){
        ctx.beginPath();
        ctx.arc(x, y, rad, 0, 2 * Math.PI, false);

        ctx.lineWidth = 5;
        ctx.strokeStyle = c;
        ctx.stroke();
        rad+=3;
        if(rad<=canvas.width){
            function2();
        }
    }

}

我的错误似乎是，不是显示圈子增长，而是显示所有圈子堆积起来。理想情况下，用户可以在两个或三个位置点击并看到多个圈子在增长。任何帮助表示赞赏。感谢。

Answer 1

你遇到的问题是代码在硬循环中调用自身 - 基本上只是用颜色充斥背景。

尝试在setTimeout中包装你的function2调用，如下所示：

if (rad <= canvas.width) {
    setTimeout(function2, 200);
}

Fiddle

你可能想看看requestAnimationFrame，但这应该可以帮助你。

此外，这只会使圈子扩大。根据您想要的最终效果，您可能希望跟踪已经开始的圆圈，并在每次动画传递过程中迭代/绘制它们。

<强>更新

这是一个能够更好地绘制彼此重叠的圆圈并使用requestAnimationFrame（webkit版本）的版本

Demo

代码（只是相关部分）

var circles = [];

function circ(x, y, rad, c) {
    ctx.fillStyle = c;  // <<== Sets the fill color
    ctx.beginPath();
    ctx.arc(x, y, rad, 0, 2 * Math.PI, false);

    // No need to update context these as we are filling the circle instead
    //ctx.lineWidth = 5;
    //ctx.strokeStyle = c;
    //ctx.stroke();

    ctx.closePath();
    ctx.fill();  // <<== Fills the circle with fill color
}

function draw() {
    var newCircles = [];
    for (var i = 0; i < circles.length; ++i) {
        circ(circles[i].x, circles[i].y, circles[i].radius, circles[i].colour);
        circles[i].radius += 3;
        if (circles[i].radius <= canvas.width) newCircles.push(circles[i]);
    }

    circles = newCircles;
    window.webkitRequestAnimationFrame(draw);
}

window.webkitRequestAnimationFrame(draw);

HTML5画布成长圈子

1 个答案: