Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

Восстановить пароль

Купить рекламу на форуме - 42 тыс руб за месяц

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

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

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

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

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

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

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

Shapes.zip

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

Изменения для примера из сообщения выше (#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,327
По умолчанию

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

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

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

bats.zip

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

Спрайтовая анимация на Canvas API

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

animation-canvas2d-js.gif

index.html

Код:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Running Cat. Canvas API, JavaScript</title>
    <script src="js/main.js"></script>
</head>

<body>
    <canvas id="renderCanvas" width="512" height="256"></canvas>
</body>

</html>
main.js

Код:

window.onload = () =>
{
    const ctx = document.getElementById("renderCanvas").getContext("2d");

    let sx = 0, sy = 0, sWidth = 512, sHeight = 256; // Source image
    let dx = 0, dy = 0, dWidth = 512, dHeight = 256; // Destination canvas
    // ctx.drawImage(spriteSheet, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

    const spriteSheet = new Image();
    spriteSheet.onload = () => { mainLoop(); };
    spriteSheet.src = "assets/sprites-cat-running.png";

    let currentTime, deltaTime;
    let lastTime = Date.now();
    let animationTime = 0;
    const animationSpeed = 100;
    const frames = [
        { x: 0, y: 0 }, { x: sWidth, y: 0 }, { x: sWidth * 2, y: 0 }, { x: sWidth * 3, y: 0 },
        { x: 0, y: sHeight }, { x: sWidth, y: sHeight }, { x: sWidth * 2, y: sHeight },
        { x: sWidth * 3, y: sHeight }
    ];

    let i = 0; // Frame index

    function mainLoop()
    {
        currentTime = Date.now();
        deltaTime = currentTime - lastTime;
        lastTime = currentTime;

        animationTime += deltaTime;
        if (animationTime >= animationSpeed)
        {
            animationTime = 0;
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            ctx.drawImage(spriteSheet, frames[i].x, frames[i].y, sWidth, sHeight, dx, dy, dWidth, dHeight);
            i++;
            if (i >= frames.length) { i = 0; }
        }
        requestAnimationFrame(mainLoop);
    }
};
Изображения
Тип файла: jpg sprites-cat-running.jpg (85.6 Кб, 0 просмотров)
8Observer8 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц



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