Холст HTML5 и JQuery, удаление содержимого

шаг 1: Draw сегмент на холстеХолст 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() начинает путь или сбрасывает текущий путь.

источник

2016-07-29 17:41:38

Чтобы расширить @ правильный ответ LeroyThompson в:

Ваш moveTo плюс lineTo создает постоянный путь.

Все команды Пути запоминаются, поэтому Путь запоминает как вашу старую линию, так и вашу новую строку.

Итак, когда вы нажмете на свою новую строку, старую (нежелательную) линию также остановили.

Как верно сказано Leroy, всегда запускает каждый Путь с `ctx.beginPath '.

beginPath делает 3 важные вещи: (! Так что ваша старая линия не будет перерисовать)

Предыдущие команды Path отбрасываются.
Местоположение холста «Перо» сбрасывается в исходную координату [0,0].
Создан новый Путь (готов к новым командам Пути).

источник

2016-07-29 17:58:52 markE

Холст HTML5 и JQuery, удаление содержимого

ответ

Смежные вопросы