Создать страницу с фоном любого цвета, при клике в любую область которой осуществляется закрашивание фигуры определенного размера

159
03 ноября 2019, 06:00

В общем-то дело такое: необходимо создать страницу с фоном любого цвета, при клике в любую область которой осуществляется закрашивание фигуры определенного размера.

Вот собственно сам код: 

<!DOCTYPE html>  
    <html> 
        <head> 
            <meta charset="UTF-8"> 
            <title>Page</title> 
            <script type = "text/javascript" src="jquery-3.3.1.js"></script> 
            <link rel="stylesheet" href="style.css"> 
        </head> 
        <body> 
            <form> 
                <div id="myCanvas" width="300"; height="300"; background-color: blue></div> 
                <script type="text/javascript"> 
                $('body').click(function(){ 
                    let c = document.getElementById("myCanvas"); 
                    let ctx = c.getContext("2d"); 
                    ctx.fillRect(20, 20, 150, 100); 
                }); 
                </script> 
            </form> 
        </body> 
    </html>

Скриншот:

Answer 1

var canvas = document.getElementById('canv'); 
canvas.addEventListener('click', function(e){ 
    if (canvas.getContext) { 
    var ctx = canvas.getContext('2d'); 
    ctx.fillRect(e.clientX - 30, e.clientY - 85 , 50, 50); 
  } 
});
#canv { 
  width: 300px; 
  height: 300px; 
  background-color:red; 
}
<canvas id="canv"> 
</canvas>

Определение координат

Рисование на Canvas

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте mario.kiev.ua
ТОП-10
READ ALSO
Альтернатива для длинных строк вставки
javascript

Альтернатива для длинных строк вставки

функция success с ajax запроса на createНу и соответственно добавляет элемент

 135
webmoney client Ошибки при установки в Nodejs
javascript

webmoney client Ошибки при установки в Nodejs

не могу никак установить вот этот модуль из npm

 154
Заменить двойные слеши в URL
javascript

Заменить двойные слеши в URL

Допустим имею такой URL:

 141
Как не выпускать фокус за пределы модального окна?
javascript

Как не выпускать фокус за пределы модального окна?

Пишу на vuejs компонент мадального окна

 137