Question

我是初学者，脚本中的代码context.textAlign = "centre";没有将"Sample Text"移动到由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

错误的错字：它是＆＃34; center＆＃34;而不是＆＃34; center＆＃34;。

＆＃13;

<!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>

＆＃13;

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不起作用

2 个答案: