Почему ClearRect удаляет все? [закрыто] ⇐ Javascript

[Anonymous]

Первое, что я сделал, это вызвал ClearRect. Затем я устанавливаю порядок загрузки каждого изображения с массивом. Я ожидал, что второй город, который я создал, будет расположен в пустоте, но ClearRect окрасил все в черный цвет. Я думаю, чтоclearRect выполняется в другое время, поскольку он не находится в массиве. отсюда и оклейка всего. Лучшее решение — просто сначала добавить в массив полностью черное изображение?

Код: Выделить всё

//index elements
let element = document.querySelector('#game-cont')
let canvas= element.querySelector('#game-canvas')
let ctx = canvas.getContext("2d")

//variables
let x=162
let y=90
ctx.imageSmoothingEnabled=false
const hero2= new Image()

function drawAll(){

//PROBLEM=>  ctx.clearRect(0,0,canvas.width,canvas.height)

hero2.onload= ()=> {

ctx.drawImage(
hero2,
0,
0,
194,
259,
x,
y,
18,
18)

}
hero2.src ='/beastman2.jpg'

}

// controls
let dir
document.addEventListener("keydown",e =>{
dir=e.key
})

document.addEventListener("keyup",e =>{
dir='null'
})

function mover(){

if (dir=='w'){
y--

}if (dir=='s'){
y++

} else if (dir=='a'){
x--

} else if (dir=='d'){
x++

}}

//animations

function update(){

mover()
drawAll()
requestAnimationFrame(update)
}

window.onload= requestAnimationFrame(update)

Код: Выделить всё

*{
box-sizing: border-box;
}

body{
background-color: black;
padding: 0;
margin: 0;
overflow: hidden;
}

#game-cont{
position: relative;
width: 352px;
height: 198px;
margin: 0 auto;
margin-top: 30px;
outline: 1px solid floralwhite;

transform: scale(2) translateY(50%);
}

#game-cont canvas{
image-rendering:pixelated;
}

Код: Выделить всё

title








 

Подробнее здесь: https://stackoverflow.com/questions/798 ... everything