Я пытаюсь сделать двухмерную платформерную игру с использованием javascript и холста HTML5. Работая над генерацией случайного уровня, я столкнулся с проблемой. У меня спрайты отлично работают, но когда я пытаюсь загрузить следующую платформу, старый исчезает. Я решил, что эта проблема будет решена, если я скопирую образ, но я не знаю, как это сделать. Я попытался найти его в google, но большинство сайтов, на которые я пошел, были не очень понятными или были связаны с другой проблемой. Не могли бы вы помочь?Как сделать копию спрайта на холсте HTML5?
-1
A
ответ
0
Это легкий способ скопировать изображение:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy() {
var imgData = ctx.getImageData(10, 10, 50, 50);
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = 255 - imgData.data[i];
imgData.data[i+1] = 255 - imgData.data[i+1];
imgData.data[i+2] = 255 - imgData.data[i+2];
imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 10, 70);
}
</script>
<button onclick="copy()">Copy</button>
</body>
</html>
+0
... или проще: 'ctx.drawImage (c, 10,10,50,50, 10,70,50,50)': https://jsfiddle.net/ m1erickson/3n9y5u2b / – markE
Смежные вопросы
- 1. Вращение спрайта на холсте
- 2. Как сделать прямоугольник в холсте html5 анимированный
- 3. Как сделать эту фигуру в холсте HTML5?
- 4. Как сделать clickable точки в холсте html5?
- 5. Рисунок на холсте HTML5
- 6. HTML5 Антиквариат на холсте
- 7. Позиционирование на холсте HTML5
- 8. Как сделать правильную проверку границ для рисования на холсте HTML5?
- 9. Как сделать изображение на холсте HTML5 вертикально и горизонтально?
- 10. HTML5: Обратный текст на холсте
- 11. Радиальный градиент на холсте HTML5
- 12. несколько видео на холсте html5?
- 13. html5 обрезка изображения на холсте
- 14. Пользовательская прокрутка на холсте html5
- 15. импортирование изображений на холсте html5
- 16. Рисование ребер на холсте HTML5
- 17. Рисование видео на холсте HTML5
- 18. Как загрузить изображение на холсте HTML5?
- 19. Как создать запущенную анимацию на холсте HTML5?
- 20. HTML5 редактирование текста на холсте
- 21. html5 утечка памяти на холсте
- 22. Несовершенный мяч на холсте HTML5
- 23. Ловля кликов на HTML5-холсте
- 24. Очистка strokeRect() на холсте HTML5
- 25. HTML5 Текстовое поле на холсте
- 26. HTML5 - номер дорожки на холсте
- 27. рисование изображения на холсте html5
- 28. Как нарисовать полигоны на холсте HTML5?
- 29. Как визуализировать содержимое DIV на холсте Html5
- 30. Как нарисовать линию градиента на холсте HTML5?
Необходим код, показывающий, как хранятся данные. – spynix
Извините, мой код немного смешался. Я буду помнить в следующий раз ... –