Пытается создать функцию отмены, вызванную нажатием кнопки на холсте.

Question

Я тестирую вещи прямо сейчас (только началось с веб-разработки несколько дней назад), поэтому я просто скопировал и вставил функцию отмены из http://www.codicode.com/art/undo_and_redo_to_the_html5_canvas.aspx. Прямо сейчас я не могу получить доступ к полному исходному коду, поэтому я просто догадываюсь, где разместить вещи.

Вот фрагмент кода, который я думаю, что имеет отношение к вопросу:

var cPushArray = new Array(); 
var cStep = -1; 
var ctx = document.getElementById('canvas').getContext("2d"); 

function cPush() { 
    cStep++; 
    if (cStep < cPushArray.length) { 
     cPushArray.length = cStep; 
    } 
    cPushArray.push(document.getElementById('canvas').toDataURL()); 
} 

function cUndo() { 
    if (cStep > 0) { 
     cStep--; 
     var canvasPic = new Image(); 
     canvasPic.src = cPushArray[cStep]; 
     canvasPic.onload = function() { 
      ctx.drawImage(canvasPic, 0, 0); 
     } 
    } 
} 

//This draws the dots on the face. 
function drawCoordinates(x, y) { 
    var pointSize = 3; // Change according to the size of the point. 
    var ctx = document.getElementById("canvas").getContext("2d"); 
    ctx.fillStyle = "#ff2626"; 
    ctx.beginPath(); //Start path 
    ctx.arc(x, y, pointSize, 0, Math.PI * 2, true); // Draw a point using the arc function of the canvas with a point structure. 
    ctx.fill(); // Close the path and fill. 
    cPush(); 
} 

//count variable keeps track of the flicks 
var count = 1; 

//this listens for button clicks and displays the elements 
document.getElementById('button').onclick = function() { 
    document.getElementById(count).style.display = "block"; 
    count++; 
} 
document.getElementById('buttonUndo').onclick = function() { 
    cUndo(); 
} 

До сих пор я знаю, за то, что кнопка отмены правильно связаны, потому что когда я код alert("hello"), предупреждение Pops когда кнопка нажата. Однако функция отмены ничего не делает в коде, и мне трудно понять, почему она ведет себя так и как ее исправить.

Answer 1

Проблема в том, что холст необходимо очистить. Когда вы делаете ctx.drawImage(canvasPic, 0, 0), это говорит: «Нарисуйте предыдущее состояние холста над тем, что сейчас находится на холсте». Проблема в том, что в предыдущем состоянии холста были четкие или пустые пиксели. Так что, используя штамп с , только материал, который был нарисован в последний раз. Значение «пустых» частей штампа не будет стирать какую-либо часть текущего экрана. You can fix this, очищая холст между рисунком. (Я добавил функцию случайного многоточия, чтобы показать это):

var cPushArray = new Array(); 
 
var cStep = -1; 
 
var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext("2d"); 
 

 

 
// Don't worry about this, I just wrote this for showing random colors 
 
function generateColor() { 
 
    var r = Math.floor(Math.random() * 256).toString(16); 
 
    var g = Math.floor(Math.random() * 256).toString(16); 
 
    var b = Math.floor(Math.random() * 256).toString(16); 
 
    return '#' + r + g + b; 
 
} 
 

 
function cPush() { 
 
    cStep++; 
 
    if (cStep < cPushArray.length) { 
 
    cPushArray.length = cStep; 
 
    } 
 
    cPushArray.push(document.getElementById('canvas').toDataURL()); 
 
} 
 

 
function cUndo() { 
 
    if (cStep >= 0) { 
 
    cStep--; 
 

 
    // V Clear the canvas 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    //^Clear the canvas 
 
    
 
    var canvasPic = new Image(); 
 
    canvasPic.src = cPushArray[cStep]; 
 
    canvasPic.onload = function() { 
 
     ctx.drawImage(canvasPic, 0, 0); 
 
    } 
 
    } 
 
} 
 

 
//This draws the dots on the face. 
 
function drawCoordinates(x, y) { 
 
    var pointSize = 30; // Change according to the size of the point. 
 
    var ctx = document.getElementById("canvas").getContext("2d"); 
 
    ctx.fillStyle = generateColor(); 
 
    ctx.beginPath(); //Start path 
 
    ctx.arc(x, y, pointSize, 0, Math.PI * 2, true); // Draw a point using the arc function of the canvas with a point structure. 
 
    ctx.fill(); // Close the path and fill. 
 
    cPush(); 
 
} 
 

 
document.getElementById('buttonUndo').onclick = function() { 
 
    cUndo(); 
 
} 
 
document.getElementById('addDot').addEventListener('click', function() { 
 
    drawCoordinates(Math.random() * canvas.width, Math.random() * canvas.height); 
 
});

html, 
 
body { 
 
    background: #222; 
 
} 
 
canvas { 
 
    background: #FFF; 
 
    display: block; 
 
    margin: 10px auto; 
 
}

<canvas id="canvas" width="320" height="240"></canvas> 
 
<button id="buttonUndo">Undo</button> 
 
<button id="addDot">Add Dot</button>