clickDraw：クリックによる図形追加

目的・機能

既に作成してあるcanvasに、クリックして位置を定め、図形を追加表示します。

関数 init で、元となるcanvasを作成し、そこから、ここでの処理を行う関数 clickDrow を呼び出します。

↓<canvas id=""
　 width="" height="">:

「既作成canvas」の作成と表示
　　
クリック点取得（これを実行してから、キャンバスをクリックする）
　　右下にクリック点座標が表示

説明

init（既作成canvas）

通常の CANVAS を用いたコードです。
他のプログラムに内部から呼び出すのは困難ですので、CANVAS を引き継ぐために
　　HTMLに　　<p><span id='canvas-name'></span></p>"　を記述しておき、
　　このプログラム中に　 document.getElementById('canvas-name').innerHTML = キャンバス名;
を記述しておくことが必要です。

クリック点取得

以下の図形を作成するための２つの端点をクリックで指定します。
[(cx0,cy0)] をクリックしてから、CANVAS をクリックすると、CANVAS の下に表示されます。修正するならCANVASをクリックしなおすか、下の FORM を手入力で修正することもできます。[(cx0,cy0)]についても同様です。
参照：「クリックによる座標・色の取得」

function  クリック点取得(i) {
    var キャンバス名 = document.getElementById("canvas-name").innerHTML;
    var canvas = document.getElementById(キャンバス名);
    canvas.onclick =  function(e) {
        var rect = e.target.getBoundingClientRect();
        var クリック点X = e.clientX - Math.floor(rect.left);
        var クリック点Y = e.clientY - Math.floor(rect.top);
        // 表示場所への表示
        if (i==0) {
            document.cform.cx0.value = クリック点X;
            document.cform.cy0.value = クリック点Y;
        }
        else if (i==1) {
            document.cform.cx1.value = クリック点X;
            document.cform.cy1.value = クリック点Y;
        }
    }
}

図形作成

次のような形式になります。

function 図形作成表示(図形) {
    var キャンバス名 = document.getElementById("canvas-name").innerHTML;
    var canvas = document.getElementById(キャンバス名);
    var ctx = canvas.getContext("2d");

    var cx0 = eval(document.cform.cx0.value); // クリック点取得で作成したformからの取得
        ：
    var lineWidth = eval(document.iform.lineWidth.value); // 図形作成オプションからの取得
　　　　：
    if (図形 == "rect") {  // 長方形のとき
        ctx.beginPath();
　　　　　　　　　　　　　　　　　　　 //            ┐
        ctx.rect(cx0, cy0, cx1-cx0, cy1-cy0);  //    │
        ctx.strokeStyle = strokeStyle; // 枠線の色   │
        ctx.lineWidth = lineWidth;     // 線の太さ   │オプションはこの間で有効
        if (fillStyle != "none") {     // 塗りつぶし │
            ctx.fillStyle = fillStyle;               │
            ctx.fill();  //                          │               
        }                              //            ┘

        ctx.closePath();
        ctx.stroke();
    }
　　　　：
}

図形	(cx0,cy0)	(cx1,cy1)
直線	開始点	終了点
長方形	左上点	右下点
円	中心点	円周点