html5のcanvasを使ってブラウザ上でのお絵描きやニコニコ動画風テロップを実装する

仕組み

作り方は非常に簡単でhtmlにcanvasタグを埋め込み、それをJavascriptでdocument.getElementById( 'canvas' ).getContext( '2d' );とするだけでcanvasの2dオブジェクトが操作できます。mousedown,mousemove,mouseupのイベントを追加して、downしたら描画開始/moveしたら軌跡を残す/upしたら描画終了という処理の流れになります。当然の事ながらマウスのポイントを取得する必要がありevent.clientX/event.clientYで取得します。canvas上に軌跡を残すにはマウスポイントの一つ前の座標と新しい移動座標をからmoveTo、lineTo、strokeといったcanvasの2dオブジェクトが持っているメソッドを利用するだけです。jsも全部で50行ぐらいです。必要なことを箇条書きでも記します。

ソースコード

html,javascriptともにgithubに上げました。

• html
• js

(function(){
Canvas.init = function(){
    addEventListener( 'mousedown', Canvas.mousedown, false);
    addEventListener( 'mousemove', Canvas.mousemove, false);
    addEventListener( 'mouseup'  , Canvas.mouseup  , false);
};

Canvas.getObject = function() {
    return document.getElementById( 'canvas' ).getContext( '2d' );
}

Canvas.getPosition = function(e) {
    return { x:e.clientX, y:e.clientY };
};

Canvas.mousedown = function(e) {
    Canvas.attr.drawing = true;
    Canvas.attr.lastposition = Canvas.getPosition(e);
};

Canvas.mouseup = function(e) {
    Canvas.attr.drawing = false;
};

Canvas.mousemove = function(e) {
    if( Canvas.attr.drawing === false ) {
        return false;
    }
    Canvas.attr.position = Canvas.getPosition(e);
    var can = Canvas.attr.Object;
    can.beginPath();
    can.moveTo(Canvas.attr.lastposition.x, Canvas.attr.lastposition.y);
    can.lineTo(Canvas.attr.position.x, Canvas.attr.position.y);
    can.closePath();
    can.stroke();
    Canvas.attr.lastposition = Canvas.attr.position;
};

Canvas.attr = {};
Canvas.attr.drawing = false;
Canvas.attr.lastposition = { x:0, y:0 };
Canvas.attr.position = { x:0, y:0 };
Canvas.attr.Object = Canvas.getObject();
Canvas.attr.Object.strokeStyle = 'black'; 
Canvas.attr.Object.lineWidth = 10;
})();

仕組み

手書きの件よりも少し複雑で文字列の描画とその消去を繰り返す実装を行いました。描画と消去の呼び出しをsetIntervalで定期的に関数を呼び出すのですが、setInterval関数の第二引数の間隔が重要になります。短くした方が描画がスムーズで今回は0.025秒間隔で文字列再描画のx座標を減らしていきます。文字列をcanvas上に描画するためにfillStyleプロパティとfillTextメソッドを利用します。また消去するためにはclearRectメソッドにてcanvas上のデータ全部を削除します。箇条書きで項目を記載します。

ソースコード

html,javascriptともにgithubに上げました。

• html
• js

(function(){
Nico.init = function() {
    if( Nico.attr.timer ) {
        clearInterval( Nico.attr.timer );
    }
    Nico.attr.timer = setInterval( 'Nico.play()', 25 );
};

Nico.getObject = function() {
    return document.getElementById( 'canvas' ).getContext( '2d' );
};

Nico.play = function() {
    Nico.remove();
    for( var i=0; i<=Nico.attr.text.length-1; i++ ) {
        var data = Nico.attr.text[i];
        Nico.attr.Object.fillStyle = 'black';
        Nico.attr.Object.fillText( data.node, data.start.x - data.offset , data.start.y );
        Nico.attr.text[i].offset += 7;
    }
};

Nico.remove = function() {
    Nico.attr.Object.fillStyle = 'white';
    Nico.attr.Object.clearRect( 0, 0, 800, 800 );
};

Nico.attr = {};
Nico.attr.Object = Nico.getObject();
Nico.attr.Object.font = '40pt Arial';
Nico.attr.text = Array();
for( var i = 0; i<=10; i++ ) {
    Nico.attr.text[i] = {};
    var prefix = '';
    for( var j = 0; j<=i; j++ ) {
        prefix += '    ';
    }
    Nico.attr.text[i].node = prefix + "(´；ω；`)";
    Nico.attr.text[i].start = { x:800, y:80*i };
    Nico.attr.text[i].offset = 0;
}
})();