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

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

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


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

Простой пример рисование квадратов на <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 в 09:08.
8Observer8 вне форума   Ответить с цитированием
Старый 07.03.2018, 02:54   #12
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,694
Репутация: 2127
По умолчанию

8Observer8, иногда удаляется не верхний квадрат, по которому я тапал, а тот, что под ним.
Вопрос: нахрена это делать на канвасе, если средствами хтмл это можно сделать в разы проще?
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 07.03.2018, 08:34   #13
8Observer8
Профессионал
 
Регистрация: 02.01.2011
Сообщений: 3,260
Репутация: 915
По умолчанию

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

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

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

Цитата:
Сообщение от 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, 09:26   #15
8Observer8
Профессионал
 
Регистрация: 02.01.2011
Сообщений: 3,260
Репутация: 915
По умолчанию

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

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

Цитата:
Сообщение от 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 в 14:27.
8Observer8 вне форума   Ответить с цитированием
Старый 07.03.2018, 16:51   #18
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,694
Репутация: 2127
По умолчанию

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

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

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

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

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Разработать 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 22:49
работа с CANVAS BuT@JL Помощь студентам 6 30.11.2008 23:18


11:39.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru