0
我來這裏爲HTML/Javascript中的一個乾淨的畫布問題。在此畫布中，它用於簽名（如this）。HTML/Javascript清潔畫布
如果我使用這些代碼：
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();
}
}但是要知道，在畫布上取所有'簽名'，因此，如果網頁有一個滾動條，沒有問題，畫布仍然顯示一些東西，如果你畫一些東西，但明確不會在它上面工作。
所以，我的問題是我希望能夠在畫布上寫字，不管它在哪裏，並且如果點擊我的按鈕的功能清晰，就可以清除畫布。
編輯 這裏我的網頁是什麼樣子： My page
現在，我把它無需滾動條來顯示，但在原來的大小，頁面有一個滾動。我的畫布位於頁面的底部，因此，當我向下滾動時，我無法繪製它，但在沒有滾動的頁面中，我可以繪製它並將其擦除！
原因是我把第二個init function，如果有滾動條或不滾動，我仍然可以在它中畫，我滾動或不滾動頁面，但不是爲了清潔它！
感謝你的幫助
道歉，我很樂意幫忙，但我很難理解。您提供的代碼段似乎沒有按照您的預期工作。你能提供一個jsfiddle（https://jsfiddle.net/）嗎？其次，當你說你希望能夠在畫布上書寫時，你是否可以更清楚地表達你的意思，不管它在哪裏？ – zfrisch
我想你的意思是這個https：// jsfiddle。net/we242fmt/1/ 現在，如果您在沒有滾動條的網頁中使用腳本，我們可以繪製它（例如，如果您進入繪畫並繪製東西）。但是，每次將它放在使用滾動條的網頁上時，如果在畫布上繪製它，它就在網頁的末尾，所以沒有任何反應，這就是爲什麼找到能夠在畫布上繪製的其他初始化函數，如果這一個在頂部還是在底部 – Nexis