// 基本的なプロパティと関数をAPNGeditオブジェクトから設定
var frames = APNGedit._lightbox.childNodes;
function setAnimationSize(w, h) { APNGedit.setAnimationSize(w,h); }
function addFrame(index)        { APNGedit.addNewFrame(index); }
function updateAnimation()      { APNGedit.updateAnimation(); }
function log(msg)               { APNGedit.log(msg); }

// 最初のフレームに画像を読み込んでから使用すること

var w, h, w2, h2;
const numFrames = 20; // 生成するフレーム数
const runTime = 1500; // アニメーション時間(ms)

// numFrames 枚の空フレームを生成
for (var f = frames.length; f <= numFrames; f++) {
    log("Adding frame " + f);
    addFrame();
}

var originalFrame = null;

// フレーム毎に呼び出される描画処理関数を定義
function renderFrame(frame, frameNum) {
    var canvas = frame.canvas;
    var ctx = canvas.getContext("2d");

    frame.blend = "over"; // over, source
    frame.dispose = "background"; // background, previous, none
    frame.delay = runTime / numFrames;

    if (frameNum == 0) {
        w = frame.img.width;
        h = frame.img.height;
        w2 = w/2;
        h2 = h/2;
        originalFrame = frame;
    }

    canvas.setAttribute("width",  w);
    canvas.setAttribute("height", h);

    ctx.clearRect(0, 0, w, h);

    if (frameNum == 0) {
        ctx.drawImage(frame.img, 0, 0);
    }

    // 角度を計算して回転したフレームを生成
    const rotateStep = (2 * Math.PI) / numFrames;
    var angle = rotateStep * frameNum;

    ctx.translate(w2, h2);
    ctx.rotate(angle);
    ctx.translate(-w2, -h2);
    ctx.drawImage(originalFrame.canvas, 0, 0);
}