#javascript #html #canvas #safari
#javascript #HTML #холст #safari
Вопрос:
Я хотел бы использовать canvas для рисования точек при наведении курсора мыши: моя реализация отлично работает в Chrome и Firefox, но по какой-то причине она не работает в Safari (однако рисование линии при наведении курсора мыши работает в Safari)
любая помощь будет оценена!
—> https://draw-9.superhi.com /
код:
let canvas = document.querySelector("canvas");
let x = 0;
let y = 0;
let context = canvas.getContext("2d");
context.strokeStyle = "black";
context.lineWidth = 15;
context.lineCap = "round";
canvas.addEventListener("mousemove", function(e) {
x = e.offsetX;
y = e.offsetY;
context.moveTo(x, y);
context.lineTo(x, y);
context.stroke();
});
Ответ №1:
В соответствии со спецификациями Safari выполняет
- Удалите все отрезки линии нулевой длины из пути.
- Удалите из пути любые подпути, не содержащие линий (т. Е. подпути с одной точкой).
перед трассировкой.
Ваш путь полностью состоит из таких отрезков линии нулевой длины ( moveTo(x,y); lineTo(x,y)
), и, следовательно, рисовать нечего.
Другие браузеры здесь глючат: отчет об ошибке Firefox, Chrome.
Чтобы сделать то, что вы хотите, т.е. нарисовать круг, используйте arc()
метод. Кроме того, не забудьте вызвать call beginPath()
, иначе ваш path будет просто расти, и вы будете снова и снова нажимать на одно и то же место, что приведет к плохой графике и производительности.
const canvas = document.querySelector("canvas");
let x = 0;
let y = 0;
const radius = 7.5;
const context = canvas.getContext("2d");
context.strokeStyle = "black";
canvas.addEventListener("mousemove", function(e) {
x = e.offsetX;
y = e.offsetY;
context.beginPath();
context.moveTo(x radius, y);
context.arc(x, y, radius, 0, Math.PI*2);
context.fill();
});
<canvas width="900" height="900">