Работа с Canvas HTML5 (примеры) - JavaScript, Ajax - Страница 3

8Observer8 · 07.03.2018, 20:27

Цитата:

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

Под ту задачу, которую ты обозначил вначале, про квадратики, я бы не выбрал канвас.
Я к чему: найди задачу, которую можно решить только канвасом.

Я обозначил в начале для себя ни одну задачу, а две:

Познакомиться с основами Canvas API
Познакомиться с основами ООП на JavaScript

Цитата:

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

Под конкретную задачу нужно выбирать конкретный инструмент.

Я думаю, что если вместо квадратов рисовать 3D кубики, то <canvas> тоже прекрасно подойдёт, потому что можно рисовать, используя WebGL.

8Observer8 · 08.03.2018, 11:10

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

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

8Observer8 · 08.03.2018, 15:03

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

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

Shapes.zip

Shapes.png

8Observer8 · 09.03.2018, 11:21

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

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

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

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

bats.zip

bats.png

8Observer8 · 18.01.2021, 11:45

Спрайтовая анимация на 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);
    }
};

09.03.2018, 11:21	#24
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); /* ... */ }`

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Разработать 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

08.03.2018, 11:10	#22
8Observer8 Старожил Регистрация: 02.01.2011 Сообщений: 3,327	В моём примере из сообщения #11 была ошибка в методе _DeleteSquares объекта-синглтона Scene, что если удалить все квадраты (ПКМ) и нарисовать два квадрата друг на друге (ЛКМ), то последний не удалялся, потому что хоть я и сбрасывал счётчик (i = 0) при попадании точки в квадрат, но на следующей итерации счётчик цикла увеличивался на единицу и происходил выход из цикла, так как i становился равен length. Я исправил ошибку, сбрасывая счётчик в -1. Демка в песочнице

08.03.2018, 15:03	#23
8Observer8 Старожил Регистрация: 02.01.2011 Сообщений: 3,327	Я усовершенствовал свой пример с квадратами из сообщения #11. Создал базовый класс Shape для подклассов Square, Triangle и Circle, от которого данные классы наследуются. Демка в песочнице Shapes.zip Shapes.png

10.03.2018, 19:25	#25
8Observer8 Старожил Регистрация: 02.01.2011 Сообщений: 3,327	Простая спрайтовая анимация на элементе <canvas> с помощью библиотеки pixi.js Объекты с анимацей появляются в случайных координатах. Двигаются в случайных направлениях. Меняют скорость на противоположенную в случае блиближения к границам <canvas> Демка в песочнице bats.zip bats.png