Не появляются картинки на canvas в javascript

Question

Пытаюсь написать шахматы на JS.

Почему-то не отображаются картинки. Браузер (хром) ошибок не выдаёт, картинки вроде подгрузил, но на полотне они не появляются.

Думал, может метод putinplace не вызывается, добавил к нему вывод в консоль - записи появляются. Пытался поместить картинки в ту же папку, что и код - тоже безрезультатно.

Клеточки при этом красятся, то есть с самим холстом всё норм. Уже не знаю что думать. Ниже код HTML и JS, у меня они в разных файлах. Пишу сюда впервые, если что-то с оформлением не то - прошу вилами сразу не тыкать.

let cellSize=100 //размер клетки
let board=document.getElementById('board')
board.height=8*cellSize
board.width=8*cellSize
let context=board.getContext("2d")
class Cell{
  x //координаты
  y
  content //есть ли в этой клетке фигура и какая
  check //атакуется ли клетка. нужно для проверки шахов
  number //номер клетки в одномерном массиве
  constructor(a,b,c){
    this.x=a
    this.y=b
    this.content='none'
    this.check=false
    this.number=c
  }
}
let cells=[] //массив клеток
i=1
j=1
for (k=0; k<64; k++){
  cells[k]=new Cell(i,j,k)
  if ((i+j)%2==0){ //условие определяет цвет клетки
    context.fillStyle="gray"
  }
else {context.fillStyle="brown"}
context.fillRect((i-1)cellSize,(j-1)cellSize,cellSize,cellSize)
j=j+1
if (j==9) {
j=1
i=i+1
}
}
class Pawn{
  color //0 - белая, 1 - черная
  place //в какой клетке находится
  firstmove //делался ли ход этой пешкой. если false - можно сходить на 2 клетки
  img
  constructor(a,b){
    this.color=a
    this.place=b
    this.firstmove=false
    this.img=new Image()
    if (this.color==0){this.img.src='pieses/whitePawn.png'}
    if (this.color==1){this.img.src='pieses/blackPawn.png'}
  }
  putinplace(){
    function fn(x,y,img){
      context.drawImage(img,(x-1)cellSize,(y-1)cellSize,cellSize,cellSize)
    }
    this.img.onload=fn(this.place.x,this.place.y,this.img) //чтобы картинка не прорисовывалась до того, как загрузится
  }
  move(){
}
  doublemove(){
}
  take(){
}
  rankup(){
}
}
let wp=[] //массив белых фигур
let bp=[] //массив чёрных фигур
for (i=0;i<8;i++){
wp[i]=new Pawn(0,cells[8+i])
wp[i].putinplace()
bp[i]=new Pawn(1,cells[48+i])
bp[i].putinplace()
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport", content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="chess2.css">
</head>
<body>
<canvas id="board"></canvas>
<script src="chess3.js"></script>
</body>
</html>

в строке this.img.onload=fn(this.place.x,this.place.y,this.img) в качестве обработчика устанавливается значение возвращаемое функцией fn, эта функция ничего не возвращает, вот ничего и не происходит — Grundy, Dec 10 '23 at 22:58

Не появляются картинки на canvas в javascript

0 Answers0