代码之家 › 专栏 › 技术社区 › Anjali

将名称放在画布上

css jquery javascript

Anjali · 技术社区 · 3 年前

我想在我的网页上创建一个画布,让用户用“Journal”字体键入他们的名字。我有以下代码,但是,正如您在dokeyDown中看到的,我只能键入“Z”。我如何为所有的字母表制作它,以便用户可以键入他们的全名。我需要为每个字母表指定keyId吗?或者有更简单的方法吗?以下是我所拥有的

<div id="my_painter">
    <canvas id="canvas" tabindex="0"></canvas>
</div>
<script>
    var tempContext = null;
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        console.log(canvas.parentNode.clientWidth);
        canvas.width = canvas.parentNode.clientWidth;
        canvas.height = canvas.parentNode.clientHeight;        
        tempContext = canvas.getContext("2d");
        tempContext.fillStyle = "blue";
        tempContext.font = "20px Journal";
        canvas.addEventListener('keydown', doKeyDown, true);
        canvas.focus();        
        window.addEventListener('keydown', doKeyDown, true);
       
    }

function doKeyDown(e) {
        var keyID = e.keyCode ? e.keyCode : e.which;
        if (keyID === 90) {
            tempContext.fillText("A", 100, 60);
            e.preventDefault();
        }
    }

任何帮助都将不胜感激

2 回复 | 直到 3 年前

ProfDFrancis 3 年前

这将允许您显示任何角色

而不是提取 .keyCode ,获取 .key ,这就是角色本身。然后你就可以很容易地显示这个角色了。

为了允许显示一系列字符,您需要在每一步向右移动光标,例如每次将光标移动几个像素。

为了让这一切顺利进行,你会过得更好不使用Journal,但选择等宽字体,例如 Courier New .

var tempContext = null;
var x = 100
window.onload = function() {
  var canvas = document.getElementById("canvas");
  console.log(canvas.parentNode.clientWidth);
  canvas.width = canvas.parentNode.clientWidth;
  canvas.height = canvas.parentNode.clientHeight;
  tempContext = canvas.getContext("2d");
  tempContext.fillStyle = "blue";
  tempContext.font = "20px Journal";

  canvas.focus();
  window.addEventListener('keydown', doKeyDown, true);

}

function doKeyDown(e) {

  tempContext.fillText(e.key, x, 60);
  x += 9
  e.preventDefault();

}

<div id="my_painter">
  <canvas id="canvas" tabindex="0"></canvas>
</div>

Neha Soni 3 年前

您可以使用 String.fromCharCode() 方法将keyID变量转换为字符。这样,就不需要为每个键匹配代码。

画布上已经添加了一个监听器,所以我在窗口上对监听器进行了评论,否则每个字符都会被打印两次。

var tempContext = null;
window.onload = function() {
  var canvas = document.getElementById("canvas");
  canvas.width = canvas.parentNode.clientWidth;
  canvas.height = canvas.parentNode.clientHeight;
  tempContext = canvas.getContext("2d");
  tempContext.fillStyle = "blue";
  tempContext.font = "20px Journal";
  canvas.addEventListener('keydown', doKeyDown, true);
  canvas.focus();
  // window.addEventListener('keydown', doKeyDown, true);

}

var x_pos = 100;

function doKeyDown(e) {
  var keyID = e.keyCode ? e.keyCode : e.which;
  var character = String.fromCharCode(keyID);
  tempContext.fillText(character, x_pos, 60);
  x_pos += 15; // Add space between letters
  e.preventDefault();
}

<div id="my_painter">
    <canvas id="canvas" tabindex="0"></canvas>
</div>