Как очистить холст навсегда, clearRect()

246
10 ноября 2017, 10:52

Суть проблемы: рисую линии на холсте, по клику мышки. Весь холст очищаю clearRect(). Если, после этого, нарисовать еще линию, то появляются все нарисованные ранее. Такое ощущение, что clearRect() просто закрашивает линии белым, а не удаляет их.

var context = canvas.getContext("2d"); 
var coords = [];//массив для хранения координат мыши первого клика 
canvas.onclick = function(event){ 
  var x = event.offsetX; 
  var y = event.offsetY; 
  if (coords.length == 0) { 
    coords.push(x); 
    coords.push(y); 
    console.log("Первый клик:", coords); 
  } else { 
    console.log("Второй клик:", coords); 
    context.moveTo(coords[0], coords[1]); 
    context.lineTo(x,y); 
    context.stroke(); 
  } 
} 
 
var clear = document.getElementById("clear"); 
clear.onclick = function(){ 
  var context = canvas.getContext("2d"); 
  context.clearRect(0,0,250,380); 
  coords.splice(0,coords.length); 
  console.log("Очистка ",coords); 
 
}
    <canvas id="canvas" width="250" height="380"></canvas> 
    <button type="button" id="clear">Очистить</button>

Как очистить холст навсегда?

Answer 1

Потому что контур надо закрывать за собой: https://developer.mozilla.org/ru/docs/Web/API/CanvasRenderingContext2D/closePath

var context = canvas.getContext("2d"); 
var coords = [];//массив для хранения координат мыши первого клика 
canvas.onclick = function(event){ 
  var x = event.offsetX; 
  var y = event.offsetY; 
  if (coords.length == 0) { 
    coords.push(x); 
    coords.push(y); 
    //console.log("Первый клик:", coords); 
  } else { 
    //console.log("Второй клик:", coords); 
    context.beginPath(); 
    context.moveTo(coords[0], coords[1]); 
    context.lineTo(x,y); 
    context.stroke(); 
    context.closePath(); 
  } 
} 
 
var clear = document.getElementById("clear"); 
clear.onclick = function(){ 
  context.clearRect(0,0,250,380); 
  coords.splice(0,coords.length); 
  //console.log("Очистка ",coords); 
}
<button type="button" id="clear">Очистить</button> 
<canvas id="canvas" width="250" height="380"></canvas>

READ ALSO
Файл js закодировался в 16ти ричный и больше не открывается visual studio

Файл js закодировался в 16ти ричный и больше не открывается visual studio

Доброго времени сутокПроблема вот в чём, жил был файл js в командном проекте visual studio TFS, и вдруг захожу утром в vs, а файл перестал открыватся...

184
Парсинг галереи изображений из js для android

Парсинг галереи изображений из js для android

Возникла задача спарсить с одного сайта галерею, которая формируется через jsПредыдущие вещи парсил через JSOUP, но со скриптами он не работает

209
Как получить данные из формы express js

Как получить данные из формы express js

Не могу получить данные из формы

230
Не правильно работает событие keyup/keypress

Не правильно работает событие keyup/keypress

Делаю вызов попапа при вводе в Input каких то символов, для этого использую событие keyup или keypress без разницыНо непосредственно при вводе с клавиатуры...

206