Форум программистов
 
О проблемах, например, с регистрацией пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Ответ
 
Опции темы
Внимание! Есть замечания модератора по теме: Только примеры, созданные участниками форума!
Старый 07.03.2018, 20:27   #21
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,252
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Под ту задачу, которую ты обозначил вначале, про квадратики, я бы не выбрал канвас.
Я к чему: найди задачу, которую можно решить только канвасом.
Я обозначил в начале для себя ни одну задачу, а две:
  • Познакомиться с основами Canvas API
  • Познакомиться с основами ООП на JavaScript

Цитата:
Сообщение от Naive Посмотреть сообщение
Под конкретную задачу нужно выбирать конкретный инструмент.
Я думаю, что если вместо квадратов рисовать 3D кубики, то <canvas> тоже прекрасно подойдёт, потому что можно рисовать, используя WebGL.
8Observer8 вне форума Ответить с цитированием
Старый 08.03.2018, 11:10   #22
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,252
По умолчанию

В моём примере из сообщения #11 была ошибка в методе _DeleteSquares объекта-синглтона Scene, что если удалить все квадраты (ПКМ) и нарисовать два квадрата друг на друге (ЛКМ), то последний не удалялся, потому что хоть я и сбрасывал счётчик (i = 0) при попадании точки в квадрат, но на следующей итерации счётчик цикла увеличивался на единицу и происходил выход из цикла, так как i становился равен length. Я исправил ошибку, сбрасывая счётчик в -1.

Демка в песочнице
8Observer8 вне форума Ответить с цитированием
Старый 08.03.2018, 15:03   #23
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,252
По умолчанию

Я усовершенствовал свой пример с квадратами из сообщения #11. Создал базовый класс Shape для подклассов Square, Triangle и Circle, от которого данные классы наследуются.

Демка в песочнице

Shapes.zip

Shapes.png
8Observer8 вне форума Ответить с цитированием
Старый 09.03.2018, 11:21   #24
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,252
По умолчанию

Изменения для примера из сообщения выше (#23)

У меня в коде классы классы Square, Trinagle и Circle наследуются от базового класса Shape. Эти классы переопределяют метод Draw. Я вынес общий код из переопределённого метода Draw этих классов в метод Draw класса Shape. А в данных классах в их методе Draw вызываю метод Draw базового класса. Например:

Код:
Shape.prototype.Draw = function() {
    this._ctx.fillStyle = this._color;
};
Код:
Circle.prototype.Draw = function () {
    Shape.prototype.Draw.call(this);
    /* ... */
}
8Observer8 вне форума Ответить с цитированием
Старый 10.03.2018, 19:25   #25
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,252
По умолчанию

Простая спрайтовая анимация на элементе <canvas> с помощью библиотеки pixi.js

Объекты с анимацей появляются в случайных координатах. Двигаются в случайных направлениях. Меняют скорость на противоположенную в случае блиближения к границам <canvas>

Демка в песочнице

bats.zip

bats.png
8Observer8 вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Разработать i-frame приложение в социальной сети ВКонтакте, используя html5 тег <canvas>. GReise HTML и CSS 3 06.01.2013 15:09
примеры для звонилок на Embarcadero HTML5 Builder beegl Софт 0 13.10.2012 18:01
работа с Canvas BloodMaX Общие вопросы Delphi 7 21.12.2009 21:49
работа с CANVAS BuT@JL Помощь студентам 6 30.11.2008 22:18


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS