0

まず、私は HTML5 のプロではありません。私は数日前に HTML5 でいくつかのことを始めました。

次に、英語が苦手で、間違いを犯す可能性があります。

これが私の問題です...

マウスを 2 回クリックするだけで線を引くことができます。線は最初のクリック ポイントから始まり、2 番目のクリック ポイントで終わります。

しかし、最初のクリック ポイントから始まり、マウスの位置に応じて方向と寸法を変更し、2 番目のクリック ポイントで終了する線を作成したいと考えています。(Android のグラフィカルなパスワード システムのようなものです。)

これは可能ですか？

マウスを 2 回クリックするだけで 1 回だけ線を引くことができるコードを見つけたので、少し変更して自分でコードを追加しました。これが私の最終的なコードです：

<!DOCTYPE HTML>
<html>

  <head>

    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
            #myCanvas {
            border: 1px solid #9C9898;
        }
    </style>

    <script src="jquery.js"></script>
    <script type="text/javascript">

        $(function(){

            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");

            var point1 = new Array();
            point1['x'] = false;
            point1['y'] = false;
            var point2 = new Array();
            point2['x'] = false;
            point2['y'] = false;

            $(document).click(function(event){

                if ( false === point1['x'] || false === point1['y']) {

                    var posX1 = event.pageX;
                    var posY1 = event.pageY;

                    point1['x'] = posX1;
                    point1['y'] = posY1;

                }

                else if ( false === point2['x'] || false === point2['y'] ) {

                    var posX2 = event.pageX;            
                    var posY2 = event.pageY;

                    point2['x'] = posX2;
                    point2['y'] = posY2;
                    console.log("second");

                    context.moveTo(point1['x'], point1['y']);
                    context.lineTo(point2['x'], point2['y']);
                    context.stroke();

                    point1['x'] = point2['x'];
                    point1['y'] = point2['y'];  
                    point2['x'] = false;
                    point2['y'] = false;

                }

            });

        });

    </script>

  </head>

  <body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
  </body>

</html>
4

1 に答える 1

0

マウスを動かしながら、最初のクリックからマウス座標までの線を描くには、ある種のアニメーション ループが必要です (数ミリ秒ごとにキャンバスをクリアし、マウスの新しい位置でキャンバス上の線を更新します)。次に、2 回目のクリックが発生したら、最後の描画後にアニメーション ループを停止し、キャンバスに線を残します。

2 つのキャンバスを重ねて配置することも有効です (1 つはアニメーション化された線「to-be」を描画するため、もう 1 つは実際に画像を保存するため)。このようにして、最初の線の描画を終了し、2 番目の線の描画を開始すると、その後のクリアは下のキャンバスに保存されている線に影響しません。

お役に立てれば。

よろしく、ゲイリー

于 2012-06-12T17:04:05.047 に答える