Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
Карл Гаусс
0 / 0 / 0
Регистрация: 03.08.2017
Сообщений: 3
1

Убрать квадрат при клике на него

23.02.2018, 21:48. Просмотров 1055. Ответов 5

Доброго времени суток!

Такой вопрос:
Я создаю квадрат ctx.fillRect(320, 320, 20, 20); и мне нужно при клике на квадратик убрать его со страницы.
Как это сделать?
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
23.02.2018, 21:48
Ответы с готовыми решениями:

Как убрать переход к верху страницы при клике
Привет, у меня небольшая проблема. В боковой(ом) меню есть ссылки на разделы,...

Возврат прошлого стиля при при клике
Здравствуйте, имеем стиль к тегу <p> <p style="color:#23a0ca;...

Действие при клике
Добрый день. Есть блок .topmenu И есть блок .topmenu div.w nav .submenu ...

Событие при клике
Привет. Есть вот такой div <div class="clearfix grpelem" id="u6844-4"...

Переадресация при клике
у меня есть плагин выбора региона, при нажати выбирается регион, надо изенить...

5
kreejoo
1 / 1 / 2
Регистрация: 24.02.2018
Сообщений: 6
24.02.2018, 22:00 2
Можно с помощью JS и jQuery.
Javascript
1
$('#idd img').fadeOut();
вместо "idd" - id вашего элемента
0
8Observer8
2320 / 1480 / 245
Регистрация: 05.10.2013
Сообщений: 4,619
Записей в блоге: 58
27.02.2018, 21:45 3
Лучший ответ Сообщение было отмечено Карл Гаусс как решение

Решение

Хочу уточнить. У вас на canvas нарисовано несколько квадратиков и вы хотите убрать тот на котором был клик?

Добавлено через 3 минуты
Пример набросал быстренько, который рисует два квадратика, по клику на canvas стираются оба: https://plnkr.co/edit/r2wSneVGqBuZomwN7Wpp?p=preview

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
 
<head>
    <style>
        #myCanvas {
            border: solid 1px;
        }
    </style>
</head>
 
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        
        ctx.fillStyle = "red";
        ctx.fillRect(220, 320, 40, 40);
        
        ctx.fillStyle = "green";
        ctx.fillRect(320, 220, 50, 50);
        
        canvas.onclick = function(event)
        {
            ctx.fillStyle = "white";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }
    </script>
</body>
 
</html>
Добавлено через 22 часа 18 минут
Я решил поупражняться. Нарисовал квадраты с применением объектно-ориентированного подхода (ООП)

Песочница: https://plnkr.co/edit/q8SdNznN4T1R4ZJbSPcB?p=preview

index.html
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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
Javascript
1
2
3
4
5
6
"use strict";
 
function main() {
    Scene.Run("renderCanvas");
}
window.onload = main;
Scene.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
"use strict";
 
var Scene = (function() {
    var _canvas = null;
    var _ctx = null;
 
    var square1 = null;
    var square2 = null;
 
    var Run = function(canvasID) {
        _canvas = document.getElementById(canvasID);
        _ctx = _canvas.getContext("2d");
 
        square1 = new Square(_ctx, 220, 320, 40, "red");
        square2 = new Square(_ctx, 320, 220, 50, "green")
 
        _Animate();
    }
 
    var _Animate = function() {
        requestAnimationFrame(function() {
            _Animate();
        });
 
        _Update();
        _Draw();
    }
 
    var _Update = function() {
 
    }
 
    var _Draw = function() {
        square1.Draw();
        square2.Draw();
    }
 
    var mPublic = {
        Run: Run
    };
    return mPublic;
}());
Square.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"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.SetSize = function(size) {
    this._size = size;
};
 
Square.prototype.GetSize = function() {
    return this._size;
};
1
8Observer8
2320 / 1480 / 245
Регистрация: 05.10.2013
Сообщений: 4,619
Записей в блоге: 58
06.03.2018, 22:54 4
Я сам тоже изучаю JavaScript и программирование в целом. Задание этой темы мне подходит, чтобы понять некоторые вещи, делая что-то на практике. Когда пытаешься что-то объяснить, то сам начинаешь лучше понимать теорию. Задание простое, но интересное.

Я считаю, что выполнил задание. Теперь квадраты появляются в месте клика левой кнопки мыши (ЛКМ) и исчезают если по ним кликнуть правой кнопкой мыши (ПКМ)

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

Сначала квадраты появляются со случайных координатами, со случайным размерами и со случайными цветами (r, g, b). По клику ЛКМ по указанной курсором координате появляется квадрат со случайным размерами и со случайными цветами.

Краткое пояснение к коду. В коде присутствует класс Square (Квадрат), который находится в файле Square.js и объект-синглтон Scene, который находится в файле Scene.js. Есть один файл main.js, где происходит вызов метода инициализации Initialize объекта-синглтона Scene. В методе Initialize происходит создание квадратов (объектов класса Square)

Объект-синглтон создаётся таким образом. Те методы, которые возвращаются через return являются открытыми (public), а те, которые не возвращаются в return являются закрытыми (private). Закрытые методы дополнительно помечены нижним подчёркиванием, как, например, метод _Draw.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var Scene = (function() {
    var _canvas = null;
    var _ctx = null;
    var _backgroundColor = "white";
 
    var squareArray = [];
 
    function Initialize(canvasID) {
        /* ... */
    }
 
    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
    };
}());
Объект Scene будет только один, потому что Сцена по логике только одна в этой программе. Сцена - это то место, где создаются объекты (метод Initialize) и где они рисуются (метод Draw)

var squareArray = []; // Массив для хранения квадратов. При нажатии на ЛКМ в массив добавляется квадрат (объект класса Square). При нажатии на ПКМ - квадрат из массива удаляется.

У квадрата есть метод IsCollision(x, y), который возвращает true, если точка клика мыши (x, y) попала в квадрат и false, если точка клика мыши (x, y) не попала в квадрат.

index.html
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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
Javascript
1
2
3
4
5
6
"use strict";
 
function main() {
    Scene.Initialize("renderCanvas");
}
window.onload = main;
Scene.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
"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);
            }
        }
        _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
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
"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);
};
1
8Observer8
2320 / 1480 / 245
Регистрация: 05.10.2013
Сообщений: 4,619
Записей в блоге: 58
08.03.2018, 15:00 5
Кроме квадратов я добавил вывод треугольников и кругов. Был создал базовый класс Shape для подклассов Square, Triangle и Circle, от которого данные классы наследуются.

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

Убрать квадрат при клике на него


index.html
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
 
<head>
    <title>Canvas API. Drawing shapes. OOP</title>
    <script src="Shape.js"></script>
    <script src="Square.js"></script>
    <script src="Triangle.js"></script>
    <script src="Circle.js"></script>
    <script src="Scene.js"></script>
    <script src="main.js"></script>
    <style>
        #renderCanvas {
            border: solid 1px;
        }
    </style>
</head>
 
<body>
    <div>
        <input id="radioSquare" type="radio" name="shape" value="Square" checked><label>Square</label><br>
        <input id="radioTriangle" type="radio" name="shape" value="Triangle"><label>Triangle</label><br>
        <input id="radioCircle" type="radio" name="shape" value="Circle"><label>Circle</label><br>
    </div>
    <canvas id="renderCanvas" width="400" height="400"></canvas>
</body>
 
</html>
main.js
Javascript
1
2
3
4
5
6
"use strict";
 
function main() {
    Scene.Initialize("renderCanvas");
}
window.onload = main;
Scene.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
"use strict";
 
var Scene = (function() {
    var _canvas = null;
    var _ctx = null;
    var _backgroundColor = "white";
    var _radioSquare = null;
    var _radioTriangle = null;
    var _radioCircle = null;
 
    var _eShapeType = Object.freeze({
        eSquare: 0,
        eTriangle: 1,
        eCircle: 2
    });
    var _currentShape = _eShapeType.eSquare;
 
    var shapeArray = [];
 
    function Initialize(canvasID) {
        _canvas = document.getElementById(canvasID);
        _ctx = _canvas.getContext("2d");
 
        _radioSquare = document.getElementById("radioSquare");
        _radioTriangle = document.getElementById("radioTriangle");
        _radioCircle = document.getElementById("radioCircle");
        _radioSquare.onclick = function() {
            _currentShape = _eShapeType.eSquare;
        }
        _radioTriangle.onclick = function() {
            _currentShape = _eShapeType.eTriangle;
        }
        _radioCircle.onclick = function() {
            _currentShape = _eShapeType.eCircle;
        }
 
        var x, y, r, g, b, size;
        for (var i = 0; i < 2; i++) {
            x = _GetRandomInt(100, 300);
            y = _GetRandomInt(100, 300);
            r = _GetRandomInt(0, 255);
            g = _GetRandomInt(0, 255);
            b = _GetRandomInt(0, 255);
            size = _GetRandomInt(40, 80);
            var square = new Square(_ctx, x, y, size, 'rgba(' + r + ', ' + g + ', ' + b + ', 255)');
            shapeArray.push(square);
 
            x = _GetRandomInt(100, 300);
            y = _GetRandomInt(100, 300);
            r = _GetRandomInt(0, 255);
            g = _GetRandomInt(0, 255);
            b = _GetRandomInt(0, 255);
            size = _GetRandomInt(40, 80);
            var triangle = new Triangle(_ctx, x, y, size, 'rgba(' + r + ', ' + g + ', ' + b + ', 255)');
            shapeArray.push(triangle);
 
            x = _GetRandomInt(100, 300);
            y = _GetRandomInt(100, 300);
            r = _GetRandomInt(0, 255);
            g = _GetRandomInt(0, 255);
            b = _GetRandomInt(0, 255);
            size = _GetRandomInt(40, 80);
            var circle = new Circle(_ctx, x, y, size, 'rgba(' + r + ', ' + g + ', ' + b + ', 255)');
            shapeArray.push(circle);
        }
 
        // Handler for left and right mouse button click
        _canvas.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) {
                _AddShape(x, y);
            } else if (evt.button === 2) {
                _DeleteShape(x, y);
            }
        };
 
        // Hide context menu by right mouse click
        window.oncontextmenu = function() {
            return false;
        };
 
        _Draw();
    }
 
    function _AddShape(x, y) {
        var r = _GetRandomInt(0, 255);
        var g = _GetRandomInt(0, 255);
        var b = _GetRandomInt(0, 255);
        var size = _GetRandomInt(40, 80);
        var shape;
        if (_currentShape === _eShapeType.eSquare) {
            shape = new Square(_ctx, x, y, size, 'rgba(' + r + ', ' + g + ', ' + b + ', 255)');
        } else if (_currentShape === _eShapeType.eTriangle) {
            shape = new Triangle(_ctx, x, y, size, 'rgba(' + r + ', ' + g + ', ' + b + ', 255)');
        } else if (_currentShape === _eShapeType.eCircle) {
            shape = new Circle(_ctx, x, y, size, 'rgba(' + r + ', ' + g + ', ' + b + ', 255)');
        }
 
        shapeArray.push(shape);
        _Draw();
    }
 
    function _DeleteShape(x, y) {
        for (var i = 0; i < shapeArray.length; i++) {
            if (shapeArray[i].IsCollision(x, y)) {
                shapeArray.splice(i, 1);
                i = -1;
            }
        }
        _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 < shapeArray.length; i++) {
            shapeArray[i].Draw();
        }
    }
 
    return {
        Initialize: Initialize
    };
}());
Shape.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"use strict";
 
function Shape(ctx, x, y, size, color) {
    this._ctx = ctx;
    this._x = x;
    this._y = y;
    this._size = size;
    this._color = color;
}
 
Shape.prototype.Draw = function() {
 
};
 
Shape.prototype.IsCollision = function(x, y) {
 
};
 
function inheritPrototype(subClass, superClass) {
    var prototype = Object.create(superClass.prototype);
    prototype.constructor = subClass;
    subClass = prototype;
}
Circle.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"use strict";
 
function Circle(ctx, x, y, size, color) {
    Shape.call(this, ctx, x, y, size, color);
}
inheritPrototype(Circle, Shape);
 
Circle.prototype.Draw = function () {
    this._ctx.fillStyle = this._color;
 
    this._ctx.beginPath();
    this._ctx.arc(this._x, this._y, this._size, 0, 2 * Math.PI, false);
    this._ctx.closePath();
    
    this._ctx.fill();
}
 
Circle.prototype.IsCollision = function (x, y) {
    var dx = Math.abs(x - this._x);
    var dy = Math.abs(y - this._y);
    return Math.sqrt(dx * dx + dy * dy) < this._size;
}
Square.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"use strict";
 
function Square(ctx, x, y, size, color) {
    Shape.call(this, ctx, x, y, size, color);
}
inheritPrototype(Square, Shape);
 
Square.prototype.Draw = function() {
    this._ctx.fillStyle = this._color;
    this._ctx.fillRect(this._x - this._size / 2, this._y - this._size / 2, this._size, this._size);
}
 
Square.prototype.IsCollision = function(x, y) {
    return (this._x - this._size / 2 <= x && x <= this._x + this._size / 2 &&
        this._y - this._size / 2 <= y && y <= this._y + this._size / 2);
};
Triangle.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
"use strict";
 
function Triangle(ctx, x, y, size, color) {
    Shape.call(this, ctx, x, y, size, color);
}
inheritPrototype(Triangle, Shape);
 
Triangle.prototype.Draw = function() {
    this._ctx.fillStyle = this._color;
 
    this._ctx.beginPath();
    this._ctx.moveTo(this._x, this._y - this._size);
    this._ctx.lineTo(this._x - this._size, this._y + this._size);
    this._ctx.lineTo(this._x + this._size, this._y + this._size);
    this._ctx.closePath();
 
    this._ctx.fill();
};
 
Triangle.prototype.IsCollision = function(x, y) {
    var Px = x;
    var Py = y;
    var Ax = this._x;
    var Ay = this._y - this._size;
    var Bx = this._x - this._size;
    var By = this._y + this._size;
    var Cx = this._x + this._size;
    var Cy = this._y + this._size;
    //debugger;
    var N1 = (By - Ay) * (Px - Ax) - (Bx - Ax) * (Py - Ay);
    var N2 = (Cy - By) * (Px - Bx) - (Cx - Bx) * (Py - By);
    var N3 = (Ay - Cy) * (Px - Cx) - (Ax - Cx) * (Py - Cy);
    var result = ((N1 > 0) && (N2 > 0) && (N3 > 0)) || ((N1 < 0) && (N2 < 0) && (N3 < 0));
    return result;
};
1
clecar
9 / 9 / 3
Регистрация: 16.02.2018
Сообщений: 29
31.03.2018, 22:43 6
Да, мне как бывшему слесарю ремонтнику на пенсии, на данный момент кажется что вас ввели в заблуждение в canvas, одно ctx переменная воспринимается в ваших кодах как обязательное, сильно вас ограничивает. Мне повезло я не учился на курсах. Чисто практика посмотрите мои работы, сохраняйте страницы смотрите как абсолютный дилетант решает задачи в canvas http://clecar.ru/dvigalki/caterpillar/caterpillar.html
В данный момент застрял, полное отсутствие связи с публикой, http://clecar.ru/raznoe/kanva/canva.htm
1
31.03.2018, 22:43
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
31.03.2018, 22:43

Выравнивание при клике
Добрый день! Помогите пожалуйста разобраться. Хочу сделать, что бы при клике...

Открытие блока при клике
Имеется форма: #msg { width: 430px; min-height: 30px; } #msg:focus { ...

Анимация блока при клике
Добрый день! Подскажите пожалуйста, как сделать что бы при клике на бок он...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru