sapphire-al2o3/dot_editor

brawser pixel editor

dot_editor

ブラウザで動くドット絵エディタ

https://dot-a.onrender.com/

描画API

canvas.jsの関数

画像のインデックスデータを作る

幅と高さを指定して画像のインデックスデータを作る。

function createIndexData(w, h)

• w: 画像の幅
• h: 画像の高さ

画像のパレットデータを作る

function createPaletteData(n)

• n: パレット数

点を描く

キャンバスに点を描く。

function drawDot(ctx, x, y, indexData, paletteIndex, scale)

• ctx: Canvasのコンテキスト
• x, y: 座標
• indexData: 画像のインデックスデータ
• paletteIndex: パレット番号
• scale: 拡大率

直線を描く

キャンバスに線を描く。

function drawLine(ctx, x0, y0, x1, y1, indexData, paletteIndex, scale)

• ctx: Canvasのコンテキスト
• x0, y0: 開始座標
• x1, y1: 終了座標
• indexData: 画像のインデックスデータ
• paletteIndex: パレット番号
• scale: 拡大率

円を描く

キャンバスに楕円を描く。

function drawEllipse(ctx, x0, y0, x1, y1, indexData, paletteIndex, scale)

• ctx: Canvasのコンテキスト
• x0, y0: 楕円に外接する四角形の左上の座標
• x1, y1: 楕円に外接する四角形の右下の座標
• indexData: 画像のインデックスデータ
• paletteIndex: パレット番号
• scale: 拡大率

画像を消す

キャンバスを透明にしてインデックスデータを0にする。

function clear(ctx, indexData)

• ctx: Canvasのコンテキスト
• indexData: 画像のインデックスデータ

白黒画像を表示するサンプルコード

const ctx = document.getElementById('canvas').getContext('2d');
const image = createIndexData(24, 24);

render(ctx, image, 16);

function render(ctx, image, scale) {
    const data = image.data;
    const w = image.width;
    const h = image.height;
    scale = scale || ctx.canvas.width / image.width;
    ctx.fillStyle = '#FFF';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillStyle = '#000';
    for(let i = 0; i < h; i++) {
        for(let j = 0; j < w; j++) {
            // 画像データが0でない部分を塗りつぶす
            if(data[i * w + j]) {
                ctx.fillRect(j * scale, i * scale, scale, scale);
            }
        }
    }
}

画像のエンコード、デコードAPI

base64.jsの関数

1ビット画像をパックしてURLにする

const data = pack(image.data);
const hash = Base64.encode(data);
location.hash = hash;

URLを1ビット画像にする

const hash = location.hash.slice(1);

if(hash) {
    const data = Base64.decode(hash);
    unpack(data, image.data);
}