Question

我正在尝试使用函数生成字母，这些字母将出现在画布上的特定位置。我在下面的代码中添加了注释，以说明我想要实现的目标。

$(document).ready(function () {  ////THIS FUNCTION GENERATES ONE OF 3 LETTERS
    function WordSelector1() {
      var word = ['A', 'B', 'C'];
      var random = word[Math.floor(Math.random() * word.length)];
      return random;
      // [enter image description here][1]
    }

    var x = WordSelector1();  ////AND ASSIGNS THOSE LETTERS AS VARIABLE "X"

    $('#x').html(x);  ////ANY TIME THE ID "X" APPEARS,
    //// IT SHOULD GET REPLACED WITH THE VARIABLE AND, IN TURN, A LETTER
});

function init() {

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  draw(ctx);
}

function draw(ctx) {
  // layer1/Line
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(15.1, 7.7);
  ctx.lineTo(92.9, 7.2);
  ctx.stroke();

  // layer1/P
  ctx.font = "16.0px 'Myriad Pro'";
  ctx.fillText("x", -0.0, 10.0);   ////VARIABLE ISN'T CORRECTLY REPLACING THIS ID. 
////IN OTHER WORDS, A LETTER IS NOT APPEARING AT THIS LOCATION
  ctx.restore();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="canvas" width="93" height="14"></canvas>
<br><br>
<span id="x"></span> & <span id="xx"></span> & <span id="xxx"></span>

Answer 1

$('#x')不要选择以＆＃39; x＆＃39;开头的所有元素和ID。它选择元素（因为ID是唯一的）具有完全id＆＃39; x＆＃39;。

此外，您的代码中永远不会调用init和draw，并且画布无用。出现第一个字母是因为当您执行$('#x').html(x);时替换第一个跨度的内容。但这与画布无关。

关于这一行： ctx.fillText("x", -0.0, 10.0);：没有涉及变量。 "x"是一个字符串。如果您尝试访问x变量，则会写入：ctx.fillText(x, -0.0, 10.0);。但由于x功能未在draw函数中定义，因此无法在此处工作。

这是你想要做的吗？

＆＃13;

function WordSelector1() {
  var word = ['A', 'B', 'C'];
  var random = word[Math.floor(Math.random() * word.length)];
  return random;
}

function init() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  draw(ctx);
}

function draw(ctx) {
  // layer1/Line
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(15.1, 7.7);
  ctx.lineTo(92.9, 7.2);
  ctx.stroke();
  
  // layer1/P
  var x = WordSelector1();
  ctx.font = "16.0px 'Myriad Pro'";
  ctx.fillText(x, -0.0, 10.0);
  ctx.restore();
}

$(document).ready(init);

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<canvas id="canvas" width="93" height="14"></canvas>

＆＃13;

Answer 2

我担心这些评论毫无疑问。在所有情况下：

如果您期望并在屏幕上指明的确切位置绘制字母

旧代码：

ctx.fillText(x, -0.0, 10.0);

新守则：

ctx.fillText($('#x').html(), -0.0, 10.0);

尝试在ctx.fillText与Canvas之后使用变量。我的代码出了什么问题？

2 个答案: