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

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

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

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

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

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

Простой пример рисование квадратов на <canvas> по клику левой кнопкой мыши и удаление квадрата по клику правой кнопкой мыши. Квадраты появляются со случайными размерами и цветами (r, g, b) Сделал в стиле объектно-ориентированного программирования. Есть один класс Square, один объект-синглтон Scene, открытые и закрытые методы и свойства.

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

index.html
Код:
<!DOCTYPE html>
<html>

<head>
    <title>Canvas API. Drawing two squares. OOP</title>
    <script src="Square.js"></script>
    <script src="Scene.js"></script>
    <script src="main.js"></script>
    <style>
        #renderCanvas {
            border: solid 1px;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="400" height="400"></canvas>
</body>

</html>
main.js
Код:
"use strict";

function main() {
    Scene.Initialize("renderCanvas");
}
window.onload = main;
Scene.js
Код:
"use strict";

var Scene = (function() {
    var _canvas = null;
    var _ctx = null;
    var _backgroundColor = "white";

    var squareArray = [];

    function Initialize(canvasID) {
        _canvas = document.getElementById(canvasID);
        _ctx = _canvas.getContext("2d");

        for (var i = 0; i < 3; i++) {
            var x = _GetRandomInt(100, 300);
            var y = _GetRandomInt(100, 300);
            var r = _GetRandomInt(0, 255);
            var g = _GetRandomInt(0, 255);
            var b = _GetRandomInt(0, 255);
            var size = _GetRandomInt(40, 80);
            var square = new Square(_ctx, x, y, size, 'rgba(' + r + ', ' + g + ', ' + b + ', 255)');
            squareArray.push(square);
        }

        // Handler for left and right mouse button click
        window.onmousedown = function(evt) {
            var x = evt.clientX;
            var y = evt.clientY;
            var rect = evt.target.getBoundingClientRect();
            x = Math.floor(x - rect.left);
            y = Math.floor(y - rect.top);

            if (evt.button === 0) {
                _AddSquare(x, y);
            } else if (evt.button === 2) {
                _DeleteSquares(x, y);
            }
        };

        // Hide context menu by right mouse click
        window.oncontextmenu = function() {
            return false;
        };

        _Draw();
    }

    function _AddSquare(x, y) {
        var r = _GetRandomInt(0, 255);
        var g = _GetRandomInt(0, 255);
        var b = _GetRandomInt(0, 255);
        var size = _GetRandomInt(40, 80);
        var square = new Square(_ctx, x, y, size, 'rgba(' + r + ', ' + g + ', ' + b + ', 255)');
        squareArray.push(square);
        _Draw();
    }

    function _DeleteSquares(x, y) {
        for (var i = 0; i < squareArray.length; i++) {
            if (squareArray[i].IsCollision(x, y)) {
                squareArray.splice(i, 1);
                i = 0;
            }
        }
        _Draw();
    }

    /**
     * Returns a random integer between min and max
     * Using Math.round() will give you a non-uniform distribution!
     */
    function _GetRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function _Draw() {
        _ctx.fillStyle = _backgroundColor;
        _ctx.fillRect(0, 0, _canvas.width, _canvas.height);
        for (var i = 0; i < squareArray.length; i++) {
            squareArray[i].Draw();
        }
    }

    return {
        Initialize: Initialize
    };
}());
Square.js
Код:
"use strict";

function Square(ctx, x, y, size, color) {
    this._ctx = ctx;
    this._x = x;
    this._y = y;
    this._size = size;
    this._color = color;
}

Square.prototype.Draw = function() {
    this._ctx.fillStyle = this._color;
    this._ctx.fillRect(this._x, this._y, this._size, this._size);
}

Square.prototype.IsCollision = function(x, y) {
    return (this._x <= x && x <= this._x + this._size &&
        this._y <= y && y <= this._y + this._size);
};

Последний раз редактировалось 8Observer8; 07.03.2018 в 08:08.
8Observer8 вне форума Ответить с цитированием
Старый 07.03.2018, 01:54   #12
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

8Observer8, иногда удаляется не верхний квадрат, по которому я тапал, а тот, что под ним.
Вопрос: нахрена это делать на канвасе, если средствами хтмл это можно сделать в разы проще?
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 07.03.2018, 07:34   #13
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Вопрос: нахрена это делать на канвасе, если средствами хтмл это можно сделать в разы проще?
Ответ простой: делается на Canvas API, потому что я изучаю Canvas API, а этот простой пример позволил мне познакомиться с тем, как рисовать квадраты и как в JS использовать элементы ООП

Цитата:
Сообщение от Naive Посмотреть сообщение
8Observer8, иногда удаляется не верхний квадрат, по которому я тапал, а тот, что под ним.
Хм, действительно. Спасибо. Пока не пойму в чём дело, но баг интересный.

Последний раз редактировалось 8Observer8; 07.03.2018 в 07:39.
8Observer8 вне форума Ответить с цитированием
Старый 07.03.2018, 08:08   #14
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
8Observer8, иногда удаляется не верхний квадрат, по которому я тапал, а тот, что под ним.
Я исправил ошибку. Добавил сброс счётчика при попадании курсора на квадрат:
Код:
    function _DeleteSquares(x, y) {
        for (var i = 0; i < squareArray.length; i++) {
            if (squareArray[i].IsCollision(x, y)) {
                squareArray.splice(i, 1);
                i = 0;
            }
        }
        _Draw();
    }
Без сброса счётчика следующий квадрат в массиве не попадал под сравнение, так как массив становился короче, а индекс уходил дальше.
8Observer8 вне форума Ответить с цитированием
Старый 07.03.2018, 08:26   #15
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Вопрос: нахрена это делать на канвасе, если средствами хтмл это можно сделать в разы проще?
С помощью <div>? Можно ли на html сделать треугольник и круг?
8Observer8 вне форума Ответить с цитированием
Старый 07.03.2018, 12:02   #16
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от 8Observer8 Посмотреть сообщение
С помощью <div>? Можно ли на html сделать треугольник и круг?
Запросто.
Тапабельный круг можно делать очень давно, через border-radius. ridero.ru/ — слева выедет стикер, и чуть ниже на 3-м слайде два круга сделаны.
Треугольник можно сделать через бордеры, если чисто визуально; либо трансформацией вложенных объектов с overflow: hidden, так он будет тапабельным.
п.с. когда только появился бордер-радиус, он не отключал тапабельность по краям. Сейчас с этим норм во всех браузерах.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 07.03.2018, 13:22   #17
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Треугольник можно сделать через бордеры
Что такое бордеры? Границы? Как нарисовать треугольник залитый цветом?

Например, на CanvasAPI это сделать очень просто. Этот код рисует треугольник жёлтого цвета с серой границей:

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

Triangle.png

Код:
<!DOCTYPE html>
<html>

<head>
    <title>Canvas API. Triangle with borders</title>
</head>

<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        var canvasElement = document.getElementById("myCanvas");
        var context = canvasElement.getContext("2d");

        // the triangle
        context.beginPath();
        context.moveTo(100, 100);
        context.lineTo(100, 300);
        context.lineTo(300, 300);
        context.closePath();

        // the outline
        context.lineWidth = 10;
        context.strokeStyle = '#666666';
        context.stroke();

        // the fill color
        context.fillStyle = "#FFCC00";
        context.fill();
    </script>
</body>

</html>

Последний раз редактировалось 8Observer8; 07.03.2018 в 13:27.
8Observer8 вне форума Ответить с цитированием
Старый 07.03.2018, 15:51   #18
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

пффф
Холст - реально классная штука, это факт. И мне кажется глупо соревноваться в стиле холст vs CSS. Потому что однажды я проиграю. Однако пока ты кидаешь тривиальные задачи, это забавно))
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 07.03.2018, 16:26   #19
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Однако пока ты кидаешь тривиальные задачи, это забавно))
Оно тривиально до тех пор пока это один треугольник, а не десятки или сотни различных фигур, которые нужно натыкать мышкой. Суть в том, что с Canvas можно организовать код в очень простом и понятном виде через ООП. Общий код для всех фигур можно убрать в общий класс Shape и от него наследоваться. Мне кажется, если я буду развивать дальше "Редактор геометрических фигур", то на Canvas он выйдет проще, чем на HTML/CSS

Последний раз редактировалось 8Observer8; 07.03.2018 в 16:28.
8Observer8 вне форума Ответить с цитированием
Старый 07.03.2018, 17:14   #20
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Канвас — это всего лишь один из инструментов фронтендерской работы.
В этом плане он ни чем не лучше SVG, css3, flash. (хотя нет, флеш и сильверлайт сосут)
Под конкретную задачу нужно выбирать конкретный инструмент. Под ту задачу, которую ты обозначил вначале, про квадратики, я бы не выбрал канвас.
Я к чему: найди задачу, которую можно решить только канвасом. Могу подбросить, возможно ты сможешь преплюнуть мое решение (я бы сам переплюнул, решая по-новому).
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 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