こういう描画ツールをwebブラウザ上で作成したいです。  
<https://dl.dropboxusercontent.com/u/429437/html5/seminar/05-draw-tool1.html>

canvasタグを使ったやり方であることは理解しており、  
予め、座標軸がわかっている（ユーザーが座標軸を設定しない）場合の描画の仕方までは理解しました。

<http://tsukinihinikeni.blogspot.jp/2012/02/canvas_05.html>

今回やりたい描画ツールの肝としましては以下の2点だと思っております。

1) ユーザーが好きな位置に、好きな大きさで描画ができる  
2) 大きさを変更する際に、リアルタイムで大きさの変更が目に見えている

しかし、これらを実現するためにはどのように実装していけば良いのかわからず困っております。

1)に関しては、ユーザーの座標軸を取得し、始点、終点を元に、図形を描画すればいいのかというのは漠然と理解はしております。  
座標の取得の仕方などもわかります。

しかし、2)の大きさが変動していく様子をわかるようにするにはどうやればいいのかがわかりませんでした。  
始点と終点が決まってから描画する方法であれば、簡単に実装できそうですが、そうでなく、リアルタイム？に大きさが変わっているため、どのように  
実装すればいいのかが理解できません。

どなたか知恵をお貸しいただけないでしょうか？

宜しくお願いします。
CC BY-SA 3.0
2016-05-02T13:02:15.133
24520
2016-05-03T00:19:21.587
13175
question
javascript html5 html5-canvas
描画ツールをcanvasで実装するにあたり、図形の大きさを変更する方法について質問があります。
参考にするページがおありになるのですから、そちらのソースをご確認されてはいかがでしょうか？

> <https://dl.dropboxusercontent.com/u/429437/html5/seminar/05-draw-
> tool1.html>

例えば、マウスを動きでリアルタイムに再描画するには、下記の手法を使っているのだなぁ、ということがわかります。

```

        // mousemoveの処理
        canvas.addEventListener("mousemove", function (e) {
            var bcr, x, y, dx, dy;
            bcr = e.target.getBoundingClientRect();
            x = e.clientX - bcr.left;
            y = e.clientY - bcr.top;
            dx = x - pre.x;
            dy = y - pre.y;
            pre.x = x;
            pre.y = y;
            if (drawing) {      // 図形の描画中
                shapeList.draw(context);
                shape.resize(dx, dy);
                shape.draw(context);
            } else if (moving) {    // 図形の移動中
                shapeList.move(dx, dy);
                shapeList.draw(context);
            } else if (resizing) {  // 図形のリサイズ
                shapeList.resize(dx, dy);
                shapeList.draw(context);
            }
        }, true);
    
```
CC BY-SA 3.0
2016-05-03T00:19:21.587
24530
2016-05-03T00:19:21.587
7471
24520
answer