Question

我尝试使用keydown和keyup在画布中显示它，但是当我按下退格键时＃39;或删除仍未删除的文本。

＆＃13;

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// do cool things with the context
context.font = '40pt Calibri';
context.fillStyle = 'blue';
$('input').keydown(function(e){
        
  if(e.keyCode==8)
  {
    var newvalue = $(this).val();
    context.fillText(newvalue, 150, 100);
  }
});
$('input').keyup(function(){
  context.fillText($(this).val(), 150, 100);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" value="">
<canvas id="myCanvas" width="578" height="200"></canvas>

＆＃13;

Answer 1

请检查以下代码段，您可以使用 clearRect（0,0，canvas.width，canvas.height）来清除Canvas。
我认为你真的不需要keyup＆amp; keydown事件。

＆＃13;

var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');

 // do cool things with the context
 context.font = '40pt Calibri';
 context.fillStyle = 'blue';

 $('input').keyup(function() {
   context.clearRect(0, 0,  canvas.width,canvas.height);
   context.fillText($(this).val(), 150, 100);

 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="">
<canvas id="myCanvas" width="578" height="200"></canvas>

＆＃13;

Answer 2

您需要在重绘之前清除画布以删除任何已填充的像素：

context.clearRect(0, 0, canvas.width, canvas.height);

正如您可能已经注意到的那样，它并没有删除您的角色，但如果您输入了另一个角色，它也会将其覆盖在前一个角色上 - 这就是为什么您需要在重绘之前清除它。

＆＃13;

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// do cool things with the context
context.font = '40pt Calibri';
context.fillStyle = 'blue';
$('input').keydown(function(e){
  if(e.keyCode==8){
    var newvalue = $(this).val();
    context.clearRect(0,0,canvas.width,canvas.height);
    context.fillText(newvalue, 150, 100);
  }
});
$('input').keyup(function(){
  context.clearRect(0,0,canvas.width,canvas.height);
  context.fillText($(this).val(), 150, 100);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" value="">
<canvas id="myCanvas" width="578" height="200"></canvas>

＆＃13;

输入到画布的html接受退格

2 个答案: