Форум

Всемогущий · #1 (**permalink**) 01.11.2018, 15:51

Крч при клике по канвасу должен создавать квадрат(ctx.fillRect(mousex,mousey)) по координатам клика.Такое возможно реализовать ?

Nexus · #2 (**permalink**) 01.11.2018, 16:26

Получить координаты клика, получить координаты холста, найти координаты клика на холсте и отрисовать квадрат.

рони · #3 (**permalink**) 01.11.2018, 17:25

Всемогущий,

<!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

Рони, в вашем коде ошибка во первых(посмотрите внимательно) во вторых когда я тыкаю на канвасе квадрат непоявляется.

рони · #5 (**permalink**) 01.11.2018, 20:08

Всемогущий,
не понимаю.

Всемогущий · #6 (**permalink**) 01.11.2018, 21:15

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

Всемогущий,

<!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>

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

Всемогущий,
не понимаю.

Странно,очень странно наверное у меня ошибка в своем коде куда я вставил ваш код.Все крч я запустил ваш код все работает!!!! все отлично.

Форум

Справочник

Discord чат

Курсы javascript