Blanktar

  1. top
  2. blog
  3. 2015
  4. 04

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

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.layerX, ev.layerY);
        });

        canvas.addEventListener('mousemove', function(ev){
            if(ev.which){
                context.lineTo(ev.layerX, ev.layerY);
                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');

とか出来る。便利。