Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.11.2018, 15:51
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 128

Создание fillRect на канвас при клике по канвасу
Крч при клике по канвасу должен создавать квадрат(ctx.fillRect(mousex,mousey)) по координатам клика.Такое возможно реализовать ?
Ответить с цитированием
  #2 (permalink)  
Старый 01.11.2018, 16:26
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Получить координаты клика, получить координаты холста, найти координаты клика на холсте и отрисовать квадрат.
Ответить с цитированием
  #3 (permalink)  
Старый 01.11.2018, 17:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

canvas квадрат по клику
Всемогущий,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
<canvas width="700" height="500" style="border:1px solid #ccc;margin:10px;cursor:crosshair;" id="canvas"></canvas>
<script>
     var canvas = document.getElementById('canvas'),
         ctx = canvas.getContext('2d');

	canvas.addEventListener('click', function(e){
		var x = e.pageX - this.offsetLeft,
	    	y = e.pageY - this.offsetTop;
            ctx.fillStyle =  '#66FF00';
            ctx.beginPath();
            ctx.rect(x, y, 15, 15)
            ctx.fill();
            ctx.stroke();
	}, false);

</script>
</body>

</html>
Ответить с цитированием
  #4 (permalink)  
Старый 01.11.2018, 20:02
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 128

Рони, в вашем коде ошибка во первых(посмотрите внимательно) во вторых когда я тыкаю на канвасе квадрат непоявляется.
Ответить с цитированием
  #5 (permalink)  
Старый 01.11.2018, 20:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Всемогущий,
не понимаю.
Ответить с цитированием
  #6 (permalink)  
Старый 01.11.2018, 21:15
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 128

Сообщение от рони Посмотреть сообщение
Всемогущий,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
<canvas width="700" height="500" style="border:1px solid #ccc;margin:10px;cursor:crosshair;" id="canvas"></canvas>
<script>
     var canvas = document.getElementById('canvas'),
         ctx = canvas.getContext('2d');

	canvas.addEventListener('click', function(e){
		var x = e.pageX - this.offsetLeft,
	    	y = e.pageY - this.offsetTop;
            ctx.fillStyle =  '#66FF00';
            ctx.beginPath();
            ctx.rect(x, y, 15, 15)
            ctx.fill();
            ctx.stroke();
	}, false);

</script>
</body>

</html>
Сообщение от рони Посмотреть сообщение
Всемогущий,
не понимаю.
Странно,очень странно наверное у меня ошибка в своем коде куда я вставил ваш код.Все крч я запустил ваш код все работает!!!! все отлично.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Как делать редирект при клике по adsense? kaylos Общие вопросы Javascript 0 30.09.2016 12:44
Добавить/удалить класс при клике. Skrowaks Общие вопросы Javascript 5 02.08.2016 05:08
При клике появлялся новый элемент (бесконечно) Eadweard Элементы интерфейса 3 16.02.2016 08:13
Изменение размера элемента при клике Derekovich Элементы интерфейса 25 05.12.2013 20:45