キャンバスHTML5とjQuery、コンテンツ

ステップ1削除：キャンバス上のセグメントを描画キャンバスHTML5とjQuery、コンテンツ

ステップ2：

ctx.clearRect(0, 0, canvas.width, canvas.height);

ステップ3：でキャンバスの内容を削除値X1を変更し、 y1とx2、y2を作成し、新しいセグメントを描画します。

問題：削除されたセグメントも再描画されますか？ここで

は私のコードです：

<html> 
<head> 
    <meta charset="utf-8"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     var canvas = document.getElementById("myCanvas"); 
     var ctx = canvas.getContext("2d"); 
     $("#Cancella").click(function() { 
      ctx.clearRect(0, 0, canvas.width, canvas.height); 
     }); 

     $("#Esegui").click(function() { 
      var canvas = document.getElementById("myCanvas"); 
      var ctx = canvas.getContext("2d"); 
      var $x1 = $('[name="x1"]').val(); 
      var $y1 = $('[name="y1"]').val(); 
      var $x2 = $('[name="x2"]').val(); 
      var $y2 = $('[name="y2"]').val(); 
      ctx.moveTo($x1, $y1); 
      ctx.lineTo($x2, $y1); 
      ctx.stroke(); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas> 
    <p>x1: 
     <input name="x1" type="text" id="x1" value="10"> y1: 
     <input name="y1" type="text" id="y1" value="20"> 
    </p> 
    <p>x2: 
     <input name="x2" type="text" id="x2" value="30"> y2: 
     <input name="y2" type="text" id="y2" value="40"> 
    </p> 
    <p> 
     <input type="submit" name="Esegui" id="Esegui" value="Esegui"> 
     <input type="submit" name="Cancella" id="Cancella" value="Cancella"> 
    </p> 
</body> 
</html>

出典

2016-07-29 sandra

Repが追加され削除されたことを願っています： –

用途：ctx.beginPath（）;

beginPath（）メソッドは、パスを開始するか、現在のパスをリセットします。 LeroyThompsonの正しい答え@上拡大すること

出典

2016-07-29 17:41:38

：

あなたmoveToプラスlineToは永続的なパスを作成します。

すべてのPathコマンドが記憶されているため、Pathは古い行と新しい行の両方を覚えています。

だから、strokeあなたの新しい行は、古い（不要な）行もまた復元されます。

Leroyが正しく言うように、は、常にすべてのPathを `ctx.beginPath 'で開始します。

前のパスのコマンドが破棄されている（ので、あなたの古い行が再描画されません！）：

beginPathは、3つの重要なことを行います。
キャンバス「ペン」の位置が原点座標[0,0]にリセットされます。
新しいパスが作成されます（新しいパスコマンドの準備ができています）。

出典

2016-07-29 17:58:52 markE

キャンバスHTML5とjQuery、コンテンツ

答えて

関連する問題