context.textAlign 不工作

Question

我是初学者，名为 context.textAlign = "centre"; 的脚本中的代码不会将 "Sample Text" 移动到 canvas 边界的中心，该边界由 css 所以我是做错了什么还是遗漏了什么等等。谢谢

<!doctype html>
<html>

<head>
  <title>html5 canvas text</title>
  <style>
    #testCanvas {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <h1> canvas text </h1>

  <canvas id="testCanvas" width="500" height="300">Your browser does not support the canvas element.</canvas>

  <script>
    window.onload = function() {
      var canvas = document.getElementById("testCanvas");
      var context = canvas.getContext("2d");
      var x = canvas.width / 2;
      var y = canvas.height / 2;

      context.textAlign = "centre";
      context.font = "Bold 60pt Arial";
      context.fillStyle = 'rgba(0,0,255,0.5)';
      context.fillText("Sample Text", x, y);
      context.strokeStyle = "green";
      context.lineWidth = 3;
      context.strokeText("Sample Text", x, y);
    }
  </script>
</body>

</html>

Answer 1

错字：它是 "center" 而不是 "centre"。

<!doctype html>
<html>

<head>
  <title>html5 canvas text</title>
  <style>
    #testCanvas {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <h1> canvas text </h1>

  <canvas id="testCanvas" width="500" height="300">Your browser does not support the canvas element.</canvas>

  <script>
    window.onload = function() {
      var canvas = document.getElementById("testCanvas");
      var context = canvas.getContext("2d");
      var x = canvas.width / 2;
      var y = canvas.height / 2;

      context.textAlign = "center";
      context.font = "Bold 60pt Arial";
      context.fillStyle = 'rgba(0,0,255,0.5)';
      context.fillText("Sample Text", x, y);
      context.strokeStyle = "green";
      context.lineWidth = 3;
      context.strokeText("Sample Text", x, y);
    }
  </script>
</body>

</html>

Answer 2

将您的 textAlign 从 centre 更改为 center

<!doctype html>
<html>

<head>
  <title>html5 canvas text</title>
  <style>
    #testCanvas {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <h1> canvas text </h1>

  <canvas id="testCanvas" width="500" height="300">Your browser does not support the canvas element.</canvas>

  <script>
    window.onload = function() {
      var canvas = document.getElementById("testCanvas");
      var context = canvas.getContext("2d");
      var x = canvas.width / 2;
      var y = canvas.height / 2;

      context.textAlign = "center";
      context.font = "Bold 60pt Arial";
      context.fillStyle = 'rgba(0,0,255,0.5)';
      context.fillText("Sample Text", x, y);
      context.strokeStyle = "green";
      context.lineWidth = 3;
      context.strokeText("Sample Text", x, y);
    }
  </script>
</body>

</html>

context.textAlign 不工作

context.textAlign isn't working

javascript

html5-canvas