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

8Observer8 · 06.03.2018, 23:07

Простой пример рисование квадратов на <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);
};

Naive · 07.03.2018, 01:54

8Observer8, иногда удаляется не верхний квадрат, по которому я тапал, а тот, что под ним.
Вопрос: нахрена это делать на канвасе, если средствами хтмл это можно сделать в разы проще?

8Observer8 · 07.03.2018, 07:34

Цитата:

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

Вопрос: нахрена это делать на канвасе, если средствами хтмл это можно сделать в разы проще?

Ответ простой: делается на Canvas API, потому что я изучаю Canvas API, а этот простой пример позволил мне познакомиться с тем, как рисовать квадраты и как в JS использовать элементы ООП

Цитата:

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

8Observer8, иногда удаляется не верхний квадрат, по которому я тапал, а тот, что под ним.

Хм, действительно. Спасибо. Пока не пойму в чём дело, но баг интересный.

8Observer8 · 07.03.2018, 08:08

Цитата:

Сообщение от 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

Цитата:

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

Вопрос: нахрена это делать на канвасе, если средствами хтмл это можно сделать в разы проще?

С помощью <div>? Можно ли на html сделать треугольник и круг?

Naive · 07.03.2018, 12:02

Цитата:

Сообщение от 8Observer8

С помощью <div>? Можно ли на html сделать треугольник и круг?

Запросто.
Тапабельный круг можно делать очень давно, через border-radius. ridero.ru/ — слева выедет стикер, и чуть ниже на 3-м слайде два круга сделаны.
Треугольник можно сделать через бордеры, если чисто визуально; либо трансформацией вложенных объектов с overflow: hidden, так он будет тапабельным.
п.с. когда только появился бордер-радиус, он не отключал тапабельность по краям. Сейчас с этим норм во всех браузерах.

8Observer8 · 07.03.2018, 13:22

Цитата:

Сообщение от 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>

Naive · 07.03.2018, 15:51

пффф
Холст - реально классная штука, это факт. И мне кажется глупо соревноваться в стиле холст vs CSS. Потому что однажды я проиграю. Однако пока ты кидаешь тривиальные задачи, это забавно))

8Observer8 · 07.03.2018, 16:26

Цитата:

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

Однако пока ты кидаешь тривиальные задачи, это забавно))

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

Naive · 07.03.2018, 17:14

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

07.03.2018, 01:54	#12
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	8Observer8, иногда удаляется не верхний квадрат, по которому я тапал, а тот, что под ним. Вопрос: нахрена это делать на канвасе, если средствами хтмл это можно сделать в разы проще? Alar, верни репу!

07.03.2018, 15:51	#18
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	пффф Холст - реально классная штука, это факт. И мне кажется глупо соревноваться в стиле холст vs CSS. Потому что однажды я проиграю. Однако пока ты кидаешь тривиальные задачи, это забавно)) Alar, верни репу!

07.03.2018, 17:14	#20
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Канвас — это всего лишь один из инструментов фронтендерской работы. В этом плане он ни чем не лучше SVG, css3, flash. (хотя нет, флеш и сильверлайт сосут) Под конкретную задачу нужно выбирать конкретный инструмент. Под ту задачу, которую ты обозначил вначале, про квадратики, я бы не выбрал канвас. Я к чему: найди задачу, которую можно решить только канвасом. Могу подбросить, возможно ты сможешь преплюнуть мое решение (я бы сам переплюнул, решая по-новому). Alar, верни репу!

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

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