aardio 范例: canvas 动效画布：跟随显示器刷新的流畅动画

//canvas 动效画布：跟随显示器刷新的流畅动画
//自绘事件与动画接口和 plus 控件相同，画布是常驻的 PARGB 内存位图，比 plus 快数倍
import win.ui;
/*DSG{{*/
var winform = win.form(text="canvas 动效画布 - 点击添加小球";right=759;bottom=479)
winform.add(
canvas={cls="canvas";left=0;top=0;right=760;bottom=480;bgcolor=0x2A1A12;anchors={left=1;top=1;right=1;bottom=1};z=1}
)
/*}}*/

var balls = {};
var addBall = function(x,y){
    table.push(balls,{
        x = x; y = y;
        vx = math.random(-300,300); vy = math.random(-500,-150);
        r = math.random(10,26);
        color = 0xFF000000 | math.random(0x404040,0xFFFFFF);
    })
}
for(i=1;20) addBall(math.random(100,660),math.random(80,300));

//画刷、字体创建一次反复使用
var brush = gdip.solidBrush(0xFFFFFFFF);
var textBrush = gdip.solidBrush(0xCCFFFFFF);
var font = gdip.font("Segoe UI",14);
var fps = 0;

//画布的坐标是设备像素，先缩放到 100% DPI 的逻辑坐标再画
winform.canvas.onDrawForeground = function(graphics,rc){
    var dpi = winform.dpiScale(1);
    graphics.scale(dpi,dpi);

    for(i,b in balls){
        brush.color = b.color;
        graphics.fillCircle(brush,b.x,b.y,b.r);
    }
    graphics.drawString(#balls ++ " 个小球   " ++ fps ++ " 帧/秒",font,12,10,textBrush);
}

//每帧回调：按真实时间（deltaMs）推进，回调后自动重绘
var frames,since = 0,0;
winform.canvas.onAnimation = function(prevState,beginning,change,timestamp,duration,deltaMs){
    var dt = math.min(deltaMs,50) / 1000; //限制异常大帧（例如窗口最小化后恢复）
    var dpi = winform.dpiScale(1);
    var rc = owner.getClientRect();
    var w,h = rc.width / dpi,rc.height / dpi;

    for(i,b in balls){
        b.vy = b.vy + 900 * dt;
        b.x = b.x + b.vx * dt;
        b.y = b.y + b.vy * dt;
        if( (b.x < b.r && b.vx < 0) || (b.x > w - b.r && b.vx > 0) ) b.vx = -b.vx;
        if(b.y > h - b.r && b.vy > 0){
            b.y = h - b.r;
            b.vy = -b.vy * 0.9;
        }
    }

    frames++;
    since = since + deltaMs;
    if(since >= 500){
        fps = math.round(frames * 1000 / since);
        frames,since = 0,0;
    }
    return true; //返回 null 才会停止动画
}

winform.canvas.onMouseDown = function(wParam,lParam){
    var x,y = win.getMessagePos(lParam);
    var dpi = winform.dpiScale(1);
    for(i=1;5) addBall(x / dpi,y / dpi);
}

winform.onDestroy = function(){
    brush.delete();
    textBrush.delete();
    font.delete();
}

winform.canvas.startAnimation(); //省略间隔：每帧回调（跟随显示器刷新率）
winform.show();
win.loopMessage();