帆布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

我希望我幫你添加和刪除了代表： –

用途：ctx.beginPath（）;

beginPath（）方法開始一個路徑或重置當前路徑。

來源

2016-07-29 17:41:38

爲了擴大對@ LeroyThompson的正確答案：

你moveTo加lineTo創建一個持久的路徑。

所有路徑命令都會被記住，所以Path會記住您的舊線路和您的新線路。

所以當你stroke你的新行老（不需要）線也被重新調整。

正如Leroy所說的，總是以`ctx.beginPath'開始每條路徑。

beginPath 3件做重要的事情：（！所以你的舊線不會重繪）

之前的路徑命令被丟棄。
畫布「筆」位置重置爲原點座標[0,0]。
創建一個新路徑（準備好新的路徑命令）。

來源

2016-07-29 17:58:52 markE

帆布HTML5和jQuery，刪除內容

回答

相關問題