Javascript-форум - Не работает drawImage

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Не работает drawImage (https://javascript.ru/forum/misc/51986-ne-rabotaet-drawimage.html)

Не работает drawImage

Всем доброго времени суток! Есть код:

<canvas id="canvas" width="800" height="634" style="position: absolute; top: 0px; left: 0px"></canvas>

<img id='Ugo' src='images/Ugo'>

<script>
VarCanvas = document.getElementById("canvas");
ctx = VarCanvas .getContext('2d');

ArrCenter = Array(100,100);

for (i=0; i<ArrCenter.length; i=i+2)
ctx.drawImage(Ugo, ArrCenter[i], ArrCenter[i+1] );

</script>

Почему не работает? Пробовал всяко-разно.

Ну во первых код может не работать если рисовать раньше чем загрузится картинка, во вторых не вижу где вы объявили переменную "Ugo".

А что пишет консоль?

Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Цитата:

Сообщение от tsigel (Сообщение 343314)

.onload = function() пробовал, тоже не работает, Ugo - это id картинки, я попробовал в drawImage ставить id и все работает. Консолью не пользуюсь, алерта хватает.

в общем так работает:
ctx.drawImage(Ugo, 100, 100 );

а так нет
ctx.drawImage(Ugo, ArrCenter[i], ArrCenter[i+1] );

<html>

<canvas id="canvas" width="800" height="634" style="position: absolute; top: 0px; left: 0px"></canvas>

<img id='Ugo' src='images/Ugo'>

<script>
VarCanvas = document.getElementById("canvas");
ctx = VarCanvas .getContext('2d');

ArrCenter = Array(100,100);

for (i=0; i<ArrCenter.length; i=i+2)
ctx.drawImage(Ugo, ArrCenter[i], ArrCenter[i+1] );

</script>
</html>

Цитата:

Сообщение от wadim (Сообщение 343324)

Консолью не пользуюсь, алерта хватает.

Алерт вам ошибок не скажет, а конслоль скажет.

Короче вот вам пример, дальше сами.

<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
<canvas></canvas>

<script>
window.onload = function () {

  var canvas = document.querySelector("canvas");
  var img = document.querySelector("img");
  var ctx = canvas.getContext("2d");

  ctx.drawImage(img, 0,0);

}
</script>

Цитата:

ArrCenter = Array(100,100);

for (i=0; i<ArrCenter.length; i=i+2)
ctx.drawImage(Ugo, ArrCenter[i], ArrCenter[i+1] );

А почему не так:

var ArrCenter = [100,100];
ctx.drawImage(Ugo, ArrCenter[0], ArrCenter[1] );

Цитата:

Сообщение от tsigel (Сообщение 343327)

Алерт вам ошибок не скажет, а конслоль скажет.

Короче вот вам пример, дальше сами.

<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
<canvas></canvas>

<script>
window.onload = function () {

  var canvas = document.querySelector("canvas");
  var img = document.querySelector("img");
  var ctx = canvas.getContext("2d");

  ctx.drawImage(img, 0,0);

}
</script>

Консолью не умею пользоваться, разбираться нет времени, алерта пока хватает, я и так знаю что дело в drawImage, а именно: в попытке в качестве аргумента использовать элемент массива.

нужно именно с " i ", так как массив может быть очень большим:
ArrCenter = Array(100,100,200,200,300,300,400,400,500,500,501, 501 ...);
и в ручную не реально все прописать.

попробовал как вы пишите:
var ArrCenter = [100,100]; - не помогло

а вот при строчке:
ctx.drawImage(Ugo, ArrCenter[0], ArrCenter[1] ); - работает, я такие методы проверки раньше использовал, но эта строка еще больше убедила меня в том, что проблема в массиве.

Цитата:

Сообщение от wadim

for (i=0; i<ArrCenter.length; i=i+2)
ctx.drawImage(Ugo, ArrCenter[i], ArrCenter[i+1] );

попробуй добавить {}

for (i=0; i<ArrCenter.length; i=i+2) {
   ctx.drawImage(Ugo, ArrCenter[i], ArrCenter[i+1] );
}

Попробовал добавить {} не помогло.

Цитата:

Сообщение от Яростный Меч

попробуй добавить {}

http://es5.javascript.ru/x12.html#x12.6.3

Цитата:

IterationStatement : for ( ExpressionNoInopt; Expressionopt; Expressionopt) Statement

http://es5.javascript.ru/x12.html#x12

Цитата:

Statement :
Block
VariableStatement
EmptyStatement
ExpressionStatement
IfStatement
IterationStatement
ContinueStatement
BreakStatement
ReturnStatement
WithStatement
LabelledStatement
SwitchStatement
ThrowStatement
TryStatement
DebuggerStatement

http://es5.javascript.ru/x12.html#x12.4

Цитата:

ExpressionStatement :
[lookahead ∉ {{,function}] Expression ;

это даёт объяснение, если считать что в качестве Expression может быть CallExpression
http://es5.javascript.ru/x11.html#x11.2.3

Цитата:

CallExpression : MemberExpression Arguments

поэтому это лишь предположение, основанное на том, что это работает, явного определения/описания Expression, которое позволило бы это подтвердить, я до сих пор не могу найти (либо это баг спецификации, либо я плохо искал)

for (var i = 0; i < 2; i++) alert(i);