Question

我希望这不是一个问题的抽象，但我一直试图弄明白

在编写生成/交互式动画（在许多语言中）时，通常会看到以下结构：

global variables
a setup function 
a draw function ( the loop )

例如javascript中的这个画布草图

var ctx, w, h,
    x = y = 1,
    xd = yd = 1;

function setup() {
    var canvas = document.getElementById("canvas");
    canvas.width = w = window.innerWidth;
    canvas.height = h = window.innerHeight;
    ctx = canvas.getContext("2d");
}

function draw() {
    ctx.clearRect(0, 0, w, h);

    ctx.fillRect(x, y, 10, 10);

    if(x>w || x<0){ xd = -xd }
    if(y>h || y<0){ yd = -yd }

    x += xd;
    y += yd;
}

setup();
setInterval(draw, 1000/60);

以上是小提琴：http://jsfiddle.net/o56enw48/

有时我甚至看到第三个函数被添加到这个等式中，比如设置，渲染，像这样的动画：http://jsfiddle.net/o56enw48/1/（在三个例子中很常见）

但在我看来，你真正需要的是绘制（循环）功能，如下所示：

var ctx, w, h,
    x = y = 1,
    xd = yd = 1;

var canvas = document.getElementById("canvas");
    canvas.width = w = window.innerWidth;
    canvas.height = h = window.innerHeight;

ctx = canvas.getContext("2d");


function draw() {
    ctx.clearRect(0, 0, w, h);

    ctx.fillRect(x, y, 10, 10);

    if (x > w || x < 0) { xd = -xd }
    if (y > h || y < 0) { yd = -yd }

    x += xd;
    y += yd;
}

setInterval(draw, 1000 / 60);

上面提到了上述内容：http://jsfiddle.net/o56enw48/2/

我意识到必须有一些实用/功能性的解释为什么我的第一个例子似乎是惯例（跨语言），只是不确定为什么????

为什么使用设置和绘制功能？

0 个答案: