Не выводится второе изображение (canvas)

@zeke · Регистрация: 02.10.2013

Студворк — интернет-сервис помощи студентам

Всем доброго времени суток!
Начал изучать HTML5 и JS, столкнулся с такой проблемой. Делаю два canvas, один с фоном, другой со спрайтом. Создаю прототип, и если в drawImage задавать цифры напрямую - все работает, если передавать переменные - не отрисовывается, при этом ошибок нет. Из скрипта уже убрал все, оставил только то, что отвечает за отрисовку, упростил уже... результат тот же.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
<head>
    <title>HTML5 Game</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css.css">
    <script src="script3.js"></script>
</head>
<body>
    <canvas id="map" width="400" height="400">
    <canvas id="player">
 
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
window.onload = init;
 
var canvas;
var ctx;
 
var pl;
var ctxPl;
 
var player;
 
var tiles = new Image();
tiles.src = "sprites.png";
 
var background = new Image();
background.src = "bg.png"
 
function init() {
    canvas = document.getElementById("map");
    ctx = canvas.getContext("2d");
 
    pl = document.getElementById("player");
    ctxPl = pl.getContext("2d");
 
    player = new Player();
 
    drawBackground();
    draw();
}
 
Player.prototype.draw = function() {
    ctx.drawImage(tiles, this.scrX, this.scrY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); // если здесь drawImage(tiles,2,2,60,60,22,18,plWidth,plHeight), то все работает
}
 
function draw() {
    player.draw();
}
 
function Player() {
    this.srcX = 2;
    this.srcY = 2;
    this.drawX = 22;
    this.drawY = 18;
    this.width = 60;
    this.height = 60;
 
    this.speed = 5;
}
 
function drawBackground() {
    ctx.drawImage(background, 0,0,400,400,0,0,400,400);
}

Что я пропустил? Понимаю, что ошибка очевидная, но найти ее не могу.

@massEffect · 11.01.2015, 00:29

проверьте количество необходимых параметров в методе drawImage,
а также правильность написания переданных параметров, например у вас передается this.scrX, вместо this.srcX

@zeke · 13.01.2015, 08:21 **[ТС]**

massEffect, спасибо! Потом уже сам у себя увидел.
Вот я дурак невнимательный

@zeke · 29.01.2015, 16:37 **[ТС]**

Дабы не плодить тем, отпишусь здесь. Снова проблема. Есть 2 canvas'а, в функции init есть определение ctxField - фон, если туда поставить ctxPlayer - то спрайт игрока не отрисовывается. Если ctxPlayer = playerCanvas.getContext("2d") вынести в функцию, которая вызывается в init, то отрисовывается. Вопрос - что я опять прохлопал?
P.S. что-то чувствую свою глупость...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
window.onload = init;
var canvas;
var ctxField;
var bgWidth = 800;
var bgHeight = 400;
 
var startBtn;
 
var playerVar;
var playerCanvas;
var ctxPlayer;
var playerdx = 0;
var playerdy = 0;
var playerWidth = 72;
var playerHeight = 32;
 
var playerSprite = new Image();
playerSprite.src = "img/player.png";
 
//var enemy1;
var enemy1Var;
var enemy1Canvas;
var ctxEnemy1;
 
var enemy1Sprite = new Image();
enemy1Sprite.src = "img/enemy1.png";
 
var background = new Image();
background.src = "img/bg.png";
 
var isPlaying; // wtf, boolean, не?
 
var requestAnimFrame = window.requestAnimationFrame || 
                        window.webkitRequestAnimationFrame || 
                        window.mozRequestAnimationFramt ||
                        window.msRequestAnimationFrame ||
                        window.oRequestAnimationFrame;
 
function init() {
    alert("test is now starting");
    canvas = document.getElementById("field");
    ctxField = canvas.getContext("2d");
    //playerCanvas = document.getElementById("player");
    //ctxPlayer = playerCanvas.getContext("2d");
    startBtn = document.getElementById("startButton");
    drawBackground();
    startBtn.addEventListener("click", gameProcess, false); [COLOR="Red"]// в gameProcess выведен ctxPlayer, тогда работает[/COLOR]
}
 
function loop() {
    if (isPlaying)
    {
        drawPlayer();
        drawEnemy();
        update();
        requestAnimFrame(loop);
 
        /* onkeydown=function(e) { // В скобках появилось e
        if(event.keyCode==37) {
            left_scroll();
            }
        else if(event.keyCode==39){
        right_scroll();
        }else if(event.keyCode==38){
        e.preventDefault(); // это отменяет прокрутку
        up_scroll();
        }else if(event.keyCode==40){
        e.preventDefault(); // это отменяет прокрутку
        down_scroll();
        }
        } */
 
    }
}
 
function startLoop() {
    isPlaying = true;
    loop();
}
 
function stopLoop() {
    isPlaying = false;
}
 
function update() {
    console.log("loop");
    //playerVar.update();
}
 
function gameProcess() {
    alert("its works!");
    playerCanvas = document.getElementById("player");
    ctxPlayer = playerCanvas.getContext("2d");
    enemy1Canvas = document.getElementById("enemy1");
    ctxEnemy1 = enemy1Canvas.getContext("2d");
 
    playerVar = new player();
    enemy1Var = new enemy1();
    //drawPlayer();
    //drawEnemy();
    startLoop();
    //window.onkeydown = processKey;
}
 
player.prototype.draw = function() {
    //clearCtxPlayer();
    ctxPlayer.drawImage(playerSprite, this.srcX, this.srcY, this.width, this.height);
}
 
player.prototype.update = function() {
    this.srcX += 13;
}
 
function player() {
    this.srcX = 10; //координаты положения на canvas
    this.srcY = 180;
    this.drawX = 0; //координаты откуда начинаем вырез
    this.drawY = 0;
    this.width = 72; //размеры изображения, которые вырезаем из источника
    this.height = 32;
    this.speed = 5;
 
}
 
//функция перемещения игрока
function movePlayer() {
    if (seaGame.pressedKey[KEY.LEFT]);
}
 
enemy1.prototype.draw = function() {
    ctxField.drawImage(enemy1Sprite, this.srcX, this.srcY, this.width, this.height);
}
 
function enemy1() {
    this.srcX = 700;
    this.srcY = 100;
    this.width = 48;
    this.height = 42;
    this.speed = 7;
}
 
function drawBackground() {
    ctxField.drawImage(background, 0, 0, bgWidth, bgHeight);
}
 
function drawPlayer() {
    playerVar.draw();
}
 
function drawEnemy() {
    enemy1Var.draw();
}
 
function clearCtxPlayer() {
    ctxField.clearRect(0, 0, bgWidth, bgHeight);
};

Новые блоги и статьи Все статьи Все блоги /
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .

@massEffect 80 / 80 / 53 Регистрация: 22.03.2013 Сообщений: 273
	11.01.2015, 00:29
	проверьте количество необходимых параметров в методе drawImage, а также правильность написания переданных параметров, например у вас передается this.scrX, вместо this.srcX 1

@zeke 3 / 3 / 0 Регистрация: 02.10.2013 Сообщений: 73
	13.01.2015, 08:21 [ТС]
	massEffect, спасибо! Потом уже сам у себя увидел. Вот я дурак невнимательный 0