Рисование по клику Canvas
132
23 мая 2019, 04:10
Есть простая страница с Canvas. И простой скрипт o.js, задача которого нарисовать квадрат заданного размера под курсором:
const canvas = $("#area");
const area = canvas[0].getContext("2d");
const rect = canvas[0].getBoundingClientRect();
let size = 20;
let lx = 0;
let ly = 0;
canvas.click(function(e){
area.clearRect(lx, ly, size, size);
lx = e.clientX - rect.left;
ly = e.clientY - rect.top;
console.log(lx);
console.log(ly);
area.fillRect(lx, ly, size, size);
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<canvas id="area" style="width: 800px; height: 800px; border: black solid 1px"></canvas>
</body>
<script src="src/o.js"></script>
</html>Проблема в том, что квадрат рисуется правее, ниже курсора, причём чем дальше клик от начала координат, тем выше разница в расстоянии между курсором и квадратом. В чём может быть проблема?
Answer 1
Как оказалось проблема связано с заданием размеров canvas через style. Если убрать style и добавить следующие строки в o.js, всё работает корректно:
var height = canvas.height = window.innerHeight;
var width = canvas.width = window.innerWidth;
-
14:06
-
21:33
Виртуальный выделенный сервер (VDS) становится отличным выбором
-
22:26
-
22:40
-
08:34
-
15:01
-
17:01
-
11:24
-
10:16
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47695 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30544 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23721 visits
- Как через css изменить цвет png изображения? 10373 visits
- Blob video url download 9980 visits
- Php curl запрос через прокси с авторизацией 9239 visits
- Работа с captcha vk api 8116 visits
© "hostciti.net" 23.1.2025 | 06:12