28.11.2014, 18:38
|
|
Профессор
|
|
Регистрация: 20.01.2014
Сообщений: 150
|
|
|
Не работает 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>
Почему не работает? Пробовал всяко-разно. |
|
28.11.2014, 18:40
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
Ну во первых код может не работать если рисовать раньше чем загрузится картинка, во вторых не вижу где вы объявили переменную "Ugo".
А что пишет консоль?
Последний раз редактировалось tsigel, 28.11.2014 в 18:42.
|
|
28.11.2014, 18:42
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
|
28.11.2014, 19:06
|
|
Профессор
|
|
Регистрация: 20.01.2014
Сообщений: 150
|
|
Сообщение от tsigel
|
Ну во первых код может не работать если рисовать раньше чем загрузится картинка, во вторых не вижу где вы объявили переменную "Ugo".
А что пишет консоль?
|
.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> |
|
28.11.2014, 19:11
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
Сообщение от wadim
|
|
Консолью не пользуюсь, алерта хватает.
|
Алерт вам ошибок не скажет, а конслоль скажет.
Короче вот вам пример, дальше сами.
<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>
|
|
28.11.2014, 19:24
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
Цитата:
|
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] );
|
|
28.11.2014, 20:19
|
|
Профессор
|
|
Регистрация: 20.01.2014
Сообщений: 150
|
|
|
Сообщение от tsigel
|
Алерт вам ошибок не скажет, а конслоль скажет.
Короче вот вам пример, дальше сами.
<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] ); - работает, я такие методы проверки раньше использовал, но эта строка еще больше убедила меня в том, что проблема в массиве.
|
|
28.11.2014, 20:34
|
|
Профессор
|
|
Регистрация: 12.04.2010
Сообщений: 557
|
|
|
Сообщение от 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] );
}
|
|
28.11.2014, 20:38
|
|
Профессор
|
|
Регистрация: 20.01.2014
Сообщений: 150
|
|
|
Попробовал добавить {} не помогло.
|
|
28.11.2014, 21:33
|
 |
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
Сообщение от Яростный Меч
|
|
попробуй добавить {}
|
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);
|
|
|
|
