動かざることバグの如し

猫ゆえに。。。

HTML5のCanvasを使って19行でお絵かきボードを作る

<canvas id="mycanvas" style="border:3px solid #999" width="700" height="400"></canvas>
<script>
document.addEventListener('DOMContentLoaded', function(){
    var drawing = false;  // ドラッグ中フラグ
    mycanvas = document.getElementById("mycanvas");
    cCtx = mycanvas.getContext('2d');
    mycanvas.onmousedown = function(event) {
        cCtx.beginPath();  // サブパスリセット
        cCtx.moveTo(event.pageX, event.pageY);  // 初期座標を指定
        drawing = true;  // ドラッグ中フラグを立てる
    };
    mycanvas.onmousemove = function(event) {
        if (!drawing) return;
        cCtx.lineTo(event.pageX, event.pageY);  // 直前の座標と現在の座標を直線で繋ぐ
        cCtx.stroke();  // canvasに描画
    }
    mycanvas.onmouseup = function(event) {
        cCtx.closePath();  // サブパスを閉じる
        drawing = false;   // ドラッグ中フラグを落とす
    };
}, false);
</script>

jQueryなし、プラグインなしでここまでシンプルできるって凄いな・・・・

広告を非表示にする