2014年12月13日土曜日

Canvas APIでお絵かきアプリを作ろう

CanvasAPIでマウスでお絵かきできるアプリを作ります。はじめにお絵かきをするパレットを用意します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>お絵かきアプリ</title>
<style>
//canvasで作ったパレットに外枠を追加する
#canvas {
    border: 1px solid #000000;
}
</style>
<script>
//ここにコードを書く
</script>
</head>
<body>
<canvas id="canvas" width="400px" height="300px"></canvas>
</body>
</html>

HTMLの記述でcanvasタグを入れておきます。この時、タグ内で横(width)と縦(heigth)を決めておかないと、お絵かきアプリが思った様に動作しないことがあります。


canvasが表示されたら、コードを書いていきます。

<script>
var canvas;
var ctx;

window.onload = function(){

    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");

    //マウスが動いた時に実行されるイベント
    canvas.addEventListener("mousemove", function(event){
        //現在のマウスの位置を取得する
        var x = event.offsetX;
        var y = event.offsetY;

        //マウスの位置に合わせて、一辺が2pxの四角を描写する
         ctx.fillRect(x, y, 2, 2);
    });
};
<script>

scriptタグで上記のコードを書いて実行してみると、


マウスが動く度に点が描写されますが、動きに合わせて常に点が描写されてしまいます。次にマウスの左ボタンをクリックした時だけ点が描写される様に修正してみます。

<script>
var canvas;
var ctx;

//マウスの左ボタンをクリックしているかの判定用変数
var drawFlag = false;

window.onload = function(){

    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");

    canvas.addEventListener("mousemove", function(event){
        //クリックしている時だけ点を描写する様にする
        if (drawFlag === true) {
            var x = event.offsetX;
            var y = event.offsetY;

            ctx.fillRect(x, y, 2, 2);
        }
    });

    //マウスの左ボタンをクリックした時の処理
    canvas.addEventListener("mousedown", function(event){
        drawFlag = true;
    });

    //マウスの左ボタンのクリックを止めた時の処理
    canvas.addEventListener("mouseup", function(event){
        drawFlag = false;
    });
};
</script>

マウスの左ボタンをクリックしているかを判定するフラグの変数を用意して、mousemoveイベントの点の描写の直前にif文で判定を追加した後、マウスの左ボタンをクリックした時のイベントであるmousedownとクリックを止めた時のイベントであるmouseupをaddEventListenerで追加して、mousedownイベントの時はdrawFlagをtrueにして押している状態にし、mousemoveイベントでの点の描写を許可し、mouseupイベントの時にdrawFlagをfalseにして、mousemoveイベントでの点の描写を禁止することによって、マウスでお絵かきできる様にします。この状態で実行してみると、


マウスの左ボタンのクリックとマウスの動きに合わせてお絵かきできる様になっています。
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)