HTML/Javascript clean canvas

Question

Я прихожу сюда для чистой проблемы с холстом в HTML/Javascript. В этом холсте он используется для подписи (например, this).

Если я использую следующие строки кода:

var canvas, ctx, flag = false, 
 
    prevX = 0, 
 
    currX = 0, 
 
    prevY = 0, 
 
    currY = 0, 
 
    dot_flag = false; 
 

 
var x = "black", 
 
    y = 2; 
 

 
function save() { 
 
    var canvas = document.getElementById("can"); 
 
    var dataURL = canvas.toDataURL("image/png"); 
 
    document.getElementById('source').value = dataURL; 
 
    var fd = new FormData(document.forms["general"]); 
 

 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('Get', 'convertToPdf.php', true); 
 

 
    xhr.upload.onprogress = function(e) { 
 
    if (e.lengthComputable) { 
 
     var percentComplete = (e.loaded/e.total) * 100; 
 
     console.log(percentComplete + '% uploaded'); 
 
     alert('Succesfully uploaded'); 
 
    } 
 
    }; 
 

 
    xhr.onload = function() { 
 

 
    }; 
 
    xhr.send(fd); 
 
} 
 

 
function color(obj) { 
 
    switch (obj.id) { 
 
    case "green": 
 
     x = "green"; 
 
     break; 
 
    case "blue": 
 
     x = "blue"; 
 
     break; 
 
    case "red": 
 
     x = "red"; 
 
     break; 
 
    case "yellow": 
 
     x = "yellow"; 
 
     break; 
 
    case "orange": 
 
     x = "orange"; 
 
     break; 
 
    case "black": 
 
     x = "black"; 
 
     break; 
 
    case "white": 
 
     x = "white"; 
 
     break; 
 
    } 
 
    if (x == "white") y = 14; 
 
    else y = 2; 
 

 
} 
 

 
function draw() { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(prevX, prevY); 
 
    ctx.lineTo(currX, currY); 
 
    ctx.strokeStyle = x; 
 
    ctx.lineWidth = y; 
 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
} 
 

 
function erase() { 
 
    var m = confirm("Want to clear"); 
 
    if (m) { 
 
    ctx.clearRect(0, 0, w, h); 
 
    document.getElementById("canvasimg").style.display = "none"; 
 
    } 
 
    var conv = new ActiveXObject("pdfServMachine.converter"); 
 
    conv.convert("http://www.google.com", "google.pdf", false); 
 
    WScript.Echo("finished conversion"); 
 
} 
 

 

 
function findxy(res, e) { 
 
    if (res == 'down') { 
 
    prevX = currX; 
 
    prevY = currY; 
 
    currX = e.clientX - canvas.offsetLeft; 
 
    currY = e.clientY - canvas.offsetTop; 
 

 
    flag = true; 
 
    dot_flag = true; 
 
    if (dot_flag) { 
 
     ctx.beginPath(); 
 
     ctx.fillStyle = x; 
 
     ctx.fillRect(currX, currY, 2, 2); 
 
     ctx.closePath(); 
 
     dot_flag = false; 
 
    } 
 
    } 
 
    if (res == 'up' || res == "out") { 
 
    flag = false; 
 
    } 
 
    if (res == 'move') { 
 
    if (flag) { 
 
     prevX = currX; 
 
     prevY = currY; 
 
     currX = e.clientX - canvas.offsetLeft; 
 
     currY = e.clientY - canvas.offsetTop; 
 
     draw(); 
 
    } 
 
    } 
 
}

<p align="center"> 
 
    <canvas id="can" width="700" height="200" style="border:2px solid;"></canvas> 
 
</p> 
 
<table align="center"> 
 
    <tr align="left"> 
 
    <td align="right"> 
 
     <input type="submit" name="ss" value="Submit" id="btn" onclick="save();return validateBeforeSubmit(); "> 
 
    </td> 
 
    <td align="right"> 
 
     <input type="button" name="ss" value="clear" id="btn" onclick="erase()"> 
 
    </td> 
 
    </tr> 
 
</table>

Четкие, работает, но если у меня есть полоса прокрутки в моей странице, мы не можем видеть ничего на холсте! !

Итак, я искал function init(), который будет иметь возможность писать на холсте, где вы находитесь на веб-странице и нашел это:

function init(){ 
 
    var canvas = document.getElementById('can'); 
 
    var ctx = canvas.getContext('2d'); 
 
    w = canvas.width; 
 
    h = canvas.height; 
 

 
    var x = null; 
 
    var y; 
 
    
 
    canvas.onmousedown = function(e){ 
 
    x = e.pageX - canvas.offsetLeft; 
 
    y = e.pageY - canvas.offsetTop; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(x,y); 
 
    } 
 
    
 
    canvas.onmouseup = function(e){ 
 
    x = null; 
 
    } 
 
    
 
    canvas.onmousemove = function(e){ 
 
    if (x==null) return; 
 
    x = e.pageX - canvas.offsetLeft; 
 
    y = e.pageY - canvas.offsetTop; 
 
    ctx.lineTo(x,y); 
 
    ctx.stroke(); 
 
    } 
 
}

Но знаете, холст взять все «подпись» для того, где вы находитесь на странице, поэтому, если на веб-странице есть полоса прокрутки, нет проблем, холст все еще показывает что-то, если вы что-то рисуете, но ясность не будет работать на нем.

Итак, моя проблема заключается в том, что я хочу писать на холсте, независимо от того, где он находится, и иметь возможность, если щелкнуть по моей кнопке, у которой есть функция, очистить холст.

EDIT Вот что мой веб-страница выглядит следующим образом: My page

Прямо сейчас, я поставил его без скроллинга, чтобы показать, но в оригинальном размере, страница есть свиток. Мой холст в нижней части страницы, поэтому, когда я прокручиваю вниз, я не могу рисовать его, но на странице без прокрутки я могу рисовать его и стирать!

Была причина, по которой я положил второй init function, что если есть полоса прокрутки или нет, я все равно могу ее нарисовать, чтобы прокрутить страницу или нет, но не для ее очистки!

Спасибо за вас вы помочь

Answer 1

https://jsfiddle.net/we242fmt/3/

(В примере я намеренно переехал холст вниз страницы с помощью CSS, чтобы лучше продемонстрировать. Вы можете удалить CSS я добавил, чтобы вернуться где вы были)

Что происходит, так это то, что вы получаете смещение элемента canvas, но смещение не учитывает, насколько далеко вы прокрутили страницу вниз.

Все, что нам нужно сделать, это просто настроить код, чтобы включить расстояние, которое пользователь прокручиваются:

 currX = e.clientX - canvas.offsetLeft + window.scrollX; 
     currY = e.clientY - canvas.offsetTop + window.scrollY; 

В вашем примере вы не должны использовать scrollX, потому что вы не прокрутки по горизонтали, но я включил его ради тщательности.