Форум программистов, компьютерный форум, киберфорум
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.78/9: Рейтинг темы: голосов - 9, средняя оценка - 4.78
4 / 4 / 1
Регистрация: 04.01.2017
Сообщений: 412
1

Рисование фигуры по координатам клика мыши

10.03.2019, 20:10. Просмотров 1812. Ответов 3

Здравствуйте!

Нужно написать сайт, в котором по клику мыши рисовались фигуры по координатам клика, пока хотя бы линию.
Вот как я пытаюсь это сделать:
PHP/HTML
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
<!DOCTYPE HTML>
<html>
    <head>
        <title>Графика</title>
        <style type="text/css">
        </style>
        <script language="JavaScript">
 
            var coords=[-1,-1,-1,-1];
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
 
            function DrawLine (x1,y1,x2,y2){
            context.fillStyle = "red";
            context.moveTo(x1,y1);
            context.lineTo(x2,y2);
            context.lineWidth = 2;
            context.strroke();
            }
 
            function getCoords(event) {          
            var mousePos = getMousePos(canvas, evt);
            if(coords[0]!=-1){
                coords[0]=event.clientX;
                coords[1]=event.clientY;
            } else{
                coords[2]=event.clientX;
                coords[3]=event.clientY;
                DrawLine (koords[0],koords[1],koords[2],koords[3]);
                coords=[-1,-1,-1,-1];
            }
            }
        </script>
    </head>
 
    <body onload="">
            <p>--------------------------------------------------------------------------------------------------------</p>
            <canvas style="width:500px; height:400px; border: 2px saddlebrown" width="350" height="250" onclick="getCoords(event)"></canvas>
            <p>--------------------------------------------------------------------------------------------------------</p>
    </body>
</html>
Подскажите пожалуйста где и что сделано неверно?

Добавлено через 20 минут
Javascript
1
 DrawLine (сoords[0],сoords[1],сoords[2],сoords[3]);
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
10.03.2019, 20:10
Ответы с готовыми решениями:

Библиотека для КОМПАС-2D на делфи. Как выводить элементы от места клика мыши, а не по статическим координатам?
Есть простенькая библиотека на делфи для компаса. Ее задача - выводить изображения резисторов,...

Рисование фигуры по клику мыши
добрый день, делаю программу в которой по нажатию мыши рисуется допустим прямоугольник на форме и...

Рисование Рисование точек по координатам
Доброе время суток. Помогите мне наглядным примером. У меня есть массив координат a х у 1 2 3...

Рисование концентрической фигуры - внутри другой фигуры
Здравствуйте. Подскажите с решением. Суть такая. На листе есть замкнутая ломаная линия. Как...

3
3893 / 2115 / 366
Регистрация: 05.10.2013
Сообщений: 6,142
Записей в блоге: 167
12.03.2019, 13:42 2
Лучший ответ Сообщение было отмечено 8Observer8 как решение

Решение

Hi,

Sandbox

PHP/HTML
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
<!DOCTYPE HTML>
<html>
 
<head>
    <title>Графика</title>
</head>
 
<body onload="">
    <p>--------------------------------------------------------------------------------------------------------</p>
    <canvas id="canvas" style="border: 2px solid saddlebrown;" width="350" height="250"></canvas>
    <p>--------------------------------------------------------------------------------------------------------</p>
 
    <script>
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
 
        var lines = [];
        var startPos, endPos;
 
        canvas.onmousedown = function(event) {
            startPos = getCoords(event);
        }
 
        canvas.onmouseup = function(event) {
            endPos = getCoords(event);
            lines.push({
                startPos: startPos,
                endPos: endPos
            });
 
            // Draw lines
            lines.forEach(function(line) {
                drawLine(
                    line.startPos.x, line.startPos.y,
                    line.endPos.x, line.endPos.y);
            });
        }
 
        function drawLine(x1, y1, x2, y2) {
            context.beginPath();
            context.strokeStyle = "red";
            context.moveTo(x1, y1);
            context.lineTo(x2, y2);
            context.lineWidth = 2;
            context.stroke();
        }
 
        function getCoords() {
            var rect = event.target.getBoundingClientRect();
            var xMousePos = event.clientX - rect.left;
            var yMousePos = event.clientY - rect.top;
            return {
                x: xMousePos,
                y: yMousePos
            };
        }
    </script>
</body>
 
</html>
1
4 / 4 / 1
Регистрация: 04.01.2017
Сообщений: 412
12.03.2019, 20:42  [ТС] 3
Спасибо!
У меня только 2 вопроса:
1) функция getCoords() не содержет входных параметров, но когда вы её вызываете вы отправляете ей параметр event, почему так сделано?

2) откуда появляется параметр event? Он автоматически как-то создается после возникновения события onmousedown?
0
3893 / 2115 / 366
Регистрация: 05.10.2013
Сообщений: 6,142
Записей в блоге: 167
12.03.2019, 23:40 4
Цитата Сообщение от Vlad__i__mir Посмотреть сообщение
почему так сделано?
Я забыл передать «event» в getCoords. Вы можете использовать глобальную переменную «event» (или «window.event»). Читайте здесь: https://learn.javascript.ru/obtaining-event-object

P.S. Я не знал, что могу использовать глобальную переменную windows.event.

My Original Message in English
Цитата Сообщение от Vlad__i__mir Посмотреть сообщение
почему так сделано?
I forgot to pass "event" to getCoords. You can use a global variable "event" (or "window.event"). Read here: https://learn.javascript.ru/obtaining-event-object

P.S. I did not know that I can use the global "windows.event" variable.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
12.03.2019, 23:40

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Передвижение объекта к координатам клика
Здравствуйте, делаю маленькую игру, и мне нужно, что бы при нажатии мышью на какую-нибудь область...

Програмная реализация клика кнопки по координатам
Добрый день. Пишу программу, создаю массив кнопок . Через мною написанный алгоритм генерирует 2...

Рисование по координатам
Доброго времени суток! есть двумерный массив, заполненный значениями от 1 до 3 random. и два...

Рисование по координатам
Здравствуйте, мне нужно ввести две координаты X и Y и должна нарисоваться линия.Как это можно...


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

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

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