Форум программистов, компьютерный форум, киберфорум
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
0 / 0 / 0
Регистрация: 19.10.2017
Сообщений: 12
1

Вызов drawImage() в отдельной функции

03.04.2020, 14:29. Показов 948. Ответов 3

Доброго всем дня, в ходе изучения javascript, столкнулся с несколькими проблемами, а именно с отрисовкой изображения.
Суть вопроса такова: возможно ли вызвать drawImage() не в onload? Собственно, имею подобную часть html-страницы:
HTML5
1
2
3
<canvas id="testCanvas" width="800" height="600" style="border:1px solid magenta;">
    </canvas>
    <div id="result"></div>
и скрипт располагаемый ниже:
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
var canvas = document.getElementById("testCanvas");
      var ctx = canvas.getContext("2d");
      var test = {
            tilesets : new Array(),
            imgLoaded: false,
            gettile: function(ctx){
                for(var i = 1; i <3; i++){
                    var img = new Image();
                    img.onload = function(){
                        test.imgLoaded = true;
                        alert('this');
                        //ctx.drawImage(img, i*100, 10);
                    };
                    img.src = "img/1.png";
                    var ts = {
                        image: img,
                        x: i*10, y: i*10, 
                    };
                    this.tilesets.push(ts);
                }
                this.imgLoaded = true;
                //document.writeln('gettile');
            },
            draw: function(ctx){
                for(var i = 0; i <2; i++){
                    if(test.imgLoaded === true){
                        ctx.drawImage(this.tilesets[0].img, this.tilesets[0].x, this.tilesets[0].y);
                    }
                }
                //document.writeln('draw');
            },
            
    }
    test.gettile(ctx);
    //alert(test.imgLoaded);
    test.draw(ctx);
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
03.04.2020, 14:29
Ответы с готовыми решениями:

Вычислительные функции выполнить в отдельной функции или процедуре
Program lab1; uses crt; Var p:longint; x:integer; Function st(y:integer):longint; Var...

Запуск отдельной функции
как можно запустить отдельно функцию по типу. В обычном коде работает а в WF C# чот не реагирует ни...

Выделение памяти в отдельной функции
Как эти 3 строчки занести в отдельную функцию a = (double **)malloc(n*sizeof(double)); b =...

Заполнение массива в отдельной функции
Здравствуйте, подскажите, как корректно оформить функция для чтения и заполнения массива из файла ...

3
Эксперт PHP
933 / 691 / 235
Регистрация: 01.02.2015
Сообщений: 1,848
03.04.2020, 14:41 2
Javascript
1
2
3
img.onload = function(){
   ctx.drawImage(this);
 };
1
0 / 0 / 0
Регистрация: 19.10.2017
Сообщений: 12
03.04.2020, 14:49  [ТС] 3
А отдельно возможно? Собственно, код объекта с предельным упрощением, взят из книги и служил для отрисовки карты из json файла, и по сути я пытаюсь понять, не читаю ли я полный мусор, или же где то сам не понимаю чего-то.
0
Эксперт PHP
933 / 691 / 235
Регистрация: 01.02.2015
Сообщений: 1,848
03.04.2020, 15:31 4
Лучший ответ Сообщение было отмечено Toyshiro как решение

Решение

Цитата Сообщение от Toyshiro Посмотреть сообщение
не читаю ли я полный мусор
смотря на приведенный код то да

https://learn.javascript.ru/
У Ильи на ютубе есть еще куча уроков. Затем https://t.me/bzd_channel там есть поиск
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
03.04.2020, 15:31

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Создание окна в отдельной функции
Всем привет! Хочу вынести функцию создания и отображения окна в отдельный файл. Но функция...

Перераспределение памяти в отдельной функции
Добрый день! Имею некое недопонимание с указателями/адресами в C/C++. Имеется некий код: #...

Посчитать факториал в отдельной функции
Помогите, пожалуйста, решить задачу. Для сайта contester.ru Вводится целое число A. Выведите его...

Выделение памяти в отдельной функции
Вот функция и указатель, который объявлен глобально. Вопрос: если не вызывать функцию, память...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.