0
我一直在创建一个画布,你可以生成文本并显示在我的画布上。html5 canvas永久清除
POST按钮和清除按钮在第一个工作正常!
我遇到的下一个问题/错误是,当我输入一个新单词并点击POST, 之前的“已清除”字母将再次出现。
function updateTotal(){
if (document.getElementById('design3').checked) {
var canvas2 = document.getElementById("displaycake_text");
context = canvas2.getContext("2d");
var $canvas2 = $("#displaycake_text");
var canvasOffset = $canvas2.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas2.scrollLeft();
var scrollY = $canvas2.scrollTop();
var startX;
var startY;
var texts = []; // an array to hold text objects
var selectedText = -1;// this var will hold the index of the hit-selected text
function draw() { // clear the canvas & redraw all texts
context.clearRect(0, 0, canvas2.width, canvas2.height);
for (var i = 0; i < texts.length; i++) { var text = texts[i];
context.fillText(text.text, text.x, text.y); }
}
function textHittest(x, y, textIndex) { // test if x,y is inside the bounding box of texts[textIndex]
var text = texts[textIndex];
return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
}
function handleMouseDown(d) {
d.preventDefault();
startX = parseInt(d.clientX - offsetX);
startY = parseInt(d.clientY - offsetY);
for (var i = 0; i < texts.length; i++) {
if (textHittest(startX, startY, i)) {
selectedText = i; } }
}
function handleMouseUp(d) { // done dragging
d.preventDefault();
selectedText = -1; }
function handleMouseOut(d) { // also done dragging
d.preventDefault();
selectedText = -1; }
function handleMouseMove(d) {
if (selectedText < 0) { return; }
d.preventDefault();
mouseX = parseInt(d.clientX - offsetX);
mouseY = parseInt(d.clientY - offsetY);
var dx = mouseX - startX;
var dy = mouseY - startY;
startX = mouseX;
startY = mouseY;
var text = texts[selectedText];
text.x += dx;
text.y += dy;
draw(); }
$("#displaycake_text").mousedown(function (d) { handleMouseDown(d); }); // listen for mouse events
$("#displaycake_text").mousemove(function (d) { handleMouseMove(d); });
$("#displaycake_text").mouseup(function (d) { handleMouseUp(d); });
$("#displaycake_text").mouseout(function (d) { handleMouseOut(d); });
$("#text_dedi").click(function() {
var y = texts.length * 20 + 20; // calc the y coordinate for this text on the canvas
var text = { text: $("#dedi_text").val(),
x: 20,
y: y
};
context.font = "30px Roboto";
text.width = context.measureText(text.text).width;
text.height = 16;
text.color = "#ffffff";
texts.push(text); // put this new text in the texts array
draw(); // redraw everything
});
//this is the code for CLEAR BUTTON
document.getElementById('clear').addEventListener('click', function() {
context.clearRect(0, 0, canvas2.width, canvas2.height); texts = []; }, false);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- PLS CLICK THE RADIO BUTTON FIRST THEN INSERT & POST -->
<br> <input type="radio" id="design3" name="design_3" onchange="updateTotal()" />
<span class="radio-chosen"></span> Dedication
<h2>
<div class="disp_dedi off"> <input type="text" size="15" id="dedi_text" name="dedicationT" placeholder="Dedication">
<button id="text_dedi"> Post </button>
<input type="button" value="Clear" id="clear" size="23" onchange="updateTotal()"> </div>
<canvas id="displaycake_text" height="200px" width="400px" style="border-color: #fff; border-style: solid;"> </canvas>
文本功能工作正常,以及拖动(我刚刚找到了它的源) 但我的CLEAR键的问题,但它仍然显示我已删除的文字。 请,我希望任何人都可以帮助我。非常感谢 !
我无处可见将var文本重置为空数组,它可能是问题的一部分。另一件事,如果你期望它被重置,因为var是在每个'updateTotal()'声明的,你必须考虑到jQuery'click'函数在每次调用时都会添加新的处理函数。因为您永远不会分离该功能,因此可以运行点击的多个实例。也许你应该回顾一下你的方法。如果您仍然遇到问题,我可以稍后详细说明答案。 – Kaddath
感谢您的回复,这不考虑重置我的画布? 'document.getElementById('clear')。addEventListener('click',function(){context.clearRect(0,0,canvas2.width,canvas2.height);},false);''我想我得到它但不是真的......我不知道如何编码它然后... – Khyana
它确实,但它或者填充它再次充满所有先前输入的文本的完整数组,或者更确切地说是触发多个点击绑定函数和每个写入他以前存储在内存中的文本。我会尽力在后期发表一个答案。 – Kaddath