Показать сообщение отдельно
  #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>
Ответить с цитированием