0

Помогите разобраться почему не рисуются крестики в квадратиках по нажатию? Нужно что бы при нажатии на каждый квадратик - там появлялся крестик, как это лучше реализовать? Мой код почему то не работает

function draw(x) {
  var canvas = x.getElementsByTagName("canvas");
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.lineTo(100, 100);
    ctx.lineTo(100, 70);
    ctx.lineTo(25, 1);
    ctx.lineTo(25, 30);
    ctx.fill();
    ctx.beginPath();
    ctx.lineTo(25, 100);
    ctx.lineTo(100, 30);
    ctx.lineTo(100, 1);
    ctx.lineTo(25, 70);
    ctx.fill();
    ctx.stroke();
  }
}
.row {
  background-color: darkgreen;
  border: black;
  padding: 10px;
  margin: 0;
  padding: 0;
}

.col-md-4 {
  height: 200px;
  background-color: darkgreen;
  border: 15px green solid;
}

.container {
  width: 50%;
  height: 100%;
  position: relative;
}

#top-left {
  border-top: 0;
  border-left: 0;
}

#top-center {
  border-top: 0;
}

#top-right {
  border-top: 0;
  border-right: 0;
}

#center-left {
  border-left: 0;
}

#center-right {
  border-right: 0;
}

#bottom-left {
  border-left: 0;
  border-bottom: 0;
}

#bottom-center {
  border-bottom: 0;
}

#bottom-right {
  border-right: 0;
  border-bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <meta charset="UTF-8">
    <title>Game</title>
</head>
<body >
    <div class="container">
        <div class="row">
            <div id="top-left" class="col-md-4" onclick="draw(this);">
                <canvas  width="inherit" height="inherit">
                </canvas>
            </div>
            <div id="top-center" class="col-md-4" onclick="draw(this);">
                <canvas  width="inherit" height="inherit">
                </canvas>
            </div>
            <div id="top-right" class="col-md-4" onclick="draw(this);">
                <canvas  width="inherit" height="inherit">
                </canvas>
            </div>
        </div>
        <div class="row">
            <div  id="center-left" class="col-md-4" onclick="draw(this);">
                <canvas  width="inherit" height="inherit">
                </canvas>
            </div>
            <div  id="center-center" class="col-md-4" onclick="draw(this);">
                <canvas  width="inherit" height="inherit">
                </canvas>
            </div>
            <div id="center-right" class="col-md-4" onclick="draw(this);">
                <canvas  width="inherit" height="inherit">
                </canvas>
            </div>
        </div>
        <div class="row">
            <div id="bottom-left" class="col-md-4" onclick="draw(this);">
                <canvas  width="inherit" height="inherit">
                </canvas>
            </div>
            <div id="bottom-center" class="col-md-4" onclick="draw(this);">
                <canvas  width="inherit" height="inherit">
                </canvas>
            </div>
            <div id="bottom-right" class="col-md-4" onclick="draw(this);">
                <canvas  width="inherit" height="inherit">
                </canvas>
            </div>
        </div>
    </div>
 </body>
</html>

1 ответ 1

0

https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

x.getElementsByTagName("canvas") - возвращает коллекцию, у которой, естественно, нет свойства (метода) getContext.

А x.getElementsByTagName("canvas")[0] возвращает первый элемент этой коллекции, у которого такое свойство (метод) есть.

var canvas = x.getElementsByTagName("canvas")[0];
if (canvas && canvas.getContext) {
  ...
1
  • Спасибо большое , а можете обьяснить что происходит с этим изменением?
    – Andrii
    13 фев 2019 в 21:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.