JavaScriptでお絵描き

WebKit の JavaScript を使ったお絵描きをしてみました。お気楽にできます。Safari とか iPhone/iPod Touch だけでなく、最近の Firefox や Opera も Canvas に対応しているようです。Camino でも見えました。IE では見えないと思います。

b7545d6c575cd8dec37057372e10a236.png

JavaScript で書いたコードはこんな感じです。

var callbacks = {};
var canvas;

function load()
{
    dashcode.setupParts();
    canvas = document.getElementById("canvas");
    if (canvas.getContext) {
        callbacks.draw(canvas.getContext("2d"));
    }
}

callbacks.draw = function(gc) {
    var X = canvas.width, Y = canvas.height, STEP = 3, x, y;
    gc.clearRect(0, 0, X, Y);
    gc.lineWidth = 1;
    gc.beginPath();
    for (y = 0; y <= Y; y = y + STEP) {
        gc.moveTo(0, 0);
        gc.lineTo(X - y, y);
    }
    gc.closePath();
    gc.stroke();
};

  1. shudo’s avatar

    shibuya.js technical talk #2 では、JS で絵を描くっていうネタがけっこうありました。イラレ上にも描けるそうです。
    http://www.shudo.net/diary/2006jun.html#20060630

    返信

  2. Ken’s avatar

    shudoさん、コメントありがとうございました。もっと早く JavaScript に目覚めるべきでした。

    新米 JavaScript プログラマなので、今が楽しいさかりです。プログラミングに夢中になると頭の中がつい Scheme になるらしくって、波括弧を普通の括弧で書いてしまいます。二種類の括弧があるというのは結構、面倒な気がします。vim の JavaScript モードがしょぼいのかも。。。

    返信

Spam Protection by WP-SpamFree