HTML5のcanvasでお絵描きしてみた。

2015-04-18

HTML5のcanvasは結構いい感じで、結構遊べるようです。Flashがいらなくなるって話も頷けるね。

実際に動くサンプルがこんなん。

ぐりぐり書ける。結構いい感じ。今のところ消せないけど。

コードはこんなん。

<html>
    <canvas width=640 height=480 style="border: 1px solid black;"></canvas>

    <script>
        var canvas = document.querySelector('canvas');
        var context = canvas.getContext('2d');

        canvas.addEventListener('mousedown', function(ev){
            context.beginPath();
            context.moveTo(ev.offsetX, ev.offsetY);
        });

        canvas.addEventListener('mousemove', function(ev){
            if(ev.which){
                context.lineTo(ev.offsetX, ev.offsetY);
                context.stroke();
            }
        });
    </script>
</html>

結構短い。

context.strokeStyle = 'red';

とか

context.strokeStyle = '#ffffff';

とかすると線の色を決められる。

太さはcontext.lineWidthに数値を入れればおっけー。

他にもかなりいろいろあるので調べてみてください。 canvasだけでもうまく使えばゲームとかがりがり作れそうな気がする。

余談ですが、

var canvas = document.querySelector('canvas');

ってやつはHTML5で追加されたAPIらしいです。 jQueryでの

var canvas = $('canvas')[0];

と等価。

document.querySelector('#thisisid');

とか

document.querySelector('.classname');

とか出来る。便利。

2023-08-18 追記

2023年現在の環境で動くように若干コードを修正しました。

修正前は ev.layerX / ev.layerY を使用していたものを、 ev.offsetX / ev.offsetY を使用するように変更してあります。