个人中心
gpt4 book ai didi

javascript - 删除放置在 Canvas 上的最后一个图形，但继续获取 getContext 不是一个函数

转载 作者：行者123 更新时间：2023-12-02 23:23:06 30 4
gpt4 key购买 nike

我是 JavaScript 新手，这是我第一次使用 HTML5 Canvas ，所以如果这是一个简单的修复，请原谅。

我使用 Canvas 创建了一个 Tic Tac Toe 游戏，每次单击 Canvas 方 block 时都会放置一个 png 或 SVG。我现在正在尝试创建一个撤消按钮，可以删除最后一步。我试图使用clearRect()函数来删除图形，当图形消失时，控制台显示错误“Uncaught TypeError: box.getContext is not a function”...这很奇怪，因为我不'当我使用“box.getContext”将图形放在第一位时，不会出现此错误。

不仅如此，当我尝试再次单击清除的 Canvas 方 block 时，它不允许放置图形......关于为什么会发生这种情况有什么想法吗？

(顺便说一句，我使用 png 表示 X，使用 SVG 表示 O 只是为了练习每种类型的图形)

这是我的 JS:

window.onload = function() {
  var num;
  var box;
  var ctx;
  var turn = 1;
  var filled;
  var symbol;
  var winner;
  var gameOver = false;

  filled = [false, false, false, false, false, false, false, false, false];
  symbol = ["", "", "", "", "", "", "", "", ""];
  winner = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];


  //canvas click + retrieving the box's number
  document.getElementById("tic").addEventListener("click", function(e) {
    boxClick(e.target.id);
  });

  function boxClick(numId) {
    box = document.getElementById(numId);
    ctx = box.getContext("2d"); /*here is where I'm getting the error*/

    switch (numId) {
      case "square1":
        num = 1;
        break;
      case "square2":
        num = 2;
        break;
      case "square3":
        num = 3;
        break;
      case "square4":
        num = 4;
        break;
      case "square5":
        num = 5;
        break;
      case "square6":
        num = 6;
        break;
      case "square7":
        num = 7;
        break;
      case "square8":
        num = 8;
        break;
      case "square9":
        num = 9;
        break;
    }

    //drawing the shapes on the canvases (switch to 0 indexing later)
    if (filled[num - 1] == false) {
      if (gameOver == false) {
        if (turn % 2 != 0) {
          var sean_image = new Image();
          sean_image.src = "graphics/sean.png";
          sean_image.onload = function() {
            ctx.drawImage(sean_image, -43, -26);
          };
          symbol[num - 1] = "X";
        } else {
          //if number is even (O player)
          var square_svg = new Image();
          square_svg.src = "graphics/square.svg";
          square_svg.onload = function() {
            ctx.drawImage(square_svg, 8.5, 8.5);
          };
          symbol[num - 1] = "O";
        }


/* ***this is where I'm trying to implement the undo function */
        //undo the last move made
        document.getElementById("undo").onclick = function() {
          ctx.clearRect(0, 0, box.width, box.height);
          filled[num - 1] == false;
          symbol[num - 1] = "";
        };
      } 
    } 
  }
};

这是我的 HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Tic Tac Toe</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" type="text/css" href="ticTacToe.css" />
  </head>
  <body>
    <header>
      <h1 id="head">Tic Tac Toe Game</h1>
    </header>
    <h1 id="result"></h1>

    <section id="game">
      <div id="tic">
        <canvas id="square1" width="100" height="100"></canvas>
        <canvas id="square2" width="100" height="100"></canvas>
        <canvas id="square3" width="100" height="100"></canvas><br />

        <canvas id="square4" width="100" height="100"></canvas>
        <canvas id="square5" width="100" height="100"></canvas>
        <canvas id="square6" width="100" height="100"></canvas><br />

        <canvas id="square7" width="100" height="100"></canvas>
        <canvas id="square8" width="100" height="100"></canvas>
        <canvas id="square9" width="100" height="100"></canvas>

        <button id="undo">Undo Move</button>
      </div>
    </section>

    <script type="text/javascript" src="ticTacToe.js"></script>
  </body>
</html>

最佳答案

这是因为您将一个点击事件监听器附加到 ID 为 tic 的 div 上。 。因此，如果您单击 tic 内的任何内容div，该事件监听器将触发。因为撤消按钮位于 tic 内部div，当单击它时，该事件监听器将触发并 e.target将代表被单击的撤消按钮。由于该撤消按钮不是 Canvas 元素，因此 getContext方法将无法正常工作，您将收到该错误。

因此，您应该使用 id=tic 将该按钮元素移到 div 之外。我会把它放在 tic div 的正下方。

关于javascript - 删除放置在 Canvas 上的最后一个图形，但继续获取 getContext 不是一个函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56858847/

30 4 0
文章推荐： javascript - 如何从单独的域请求 JSON 数据并自己使用它
文章推荐： javascript - javascript 中的自定义音量 slider
文章推荐： javascript - 如何合并和匹配 2 个单独的对象？
文章推荐： javascript - 等待文件加载，然后在每个 'line' 上运行一个函数，但等待每行的返回
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com