Блог

Главная - Вопросы по программированию - я пытаюсь получить положение щелчка мыши на холсте и залить этот пиксель черным. это мой текущий код: как я могу его исправить?

я пытаюсь получить положение щелчка мыши на холсте и залить этот пиксель черным. это мой текущий код: как я могу его исправить?

#javascript #html #css #canvas #bulma

#javascript #HTML #css #холст #bulma

Вопрос:

итак, вот код, я получил его, чтобы регистрировать положение мыши и заполнять его. все, что мне сейчас нужно, это заполнить прямоугольник в положении щелчка мыши. может кто-нибудь сказать мне, как я это исправлю?

 const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const scale = 8;
const width = 785;
const height = 585;
context.fillStyle = "black";
canvas.width = width;
canvas.height = height;

context.scale(scale, scale);
context.fillRect(50, 50, 1, 1);

canvas.addEventListener("mousedown", fillc, false);

function fillc(event) {
  let canvasElem = document.querySelector("canvas");

  canvasElem.addEventListener("mousedown", getMousePosition(canvas, event));

  function getMousePosition(canvas, event) {
    context.fillStyle = "black";
    let rect = canvas.getBoundingClientRect();
    let x = Math.floor(event.clientX - rect.left);
    let y = Math.floor(event.clientY - rect.top);
    console.log("Coordinate x: "   x, "Coordinate y: "   y);
    console.log("ok");
    context.fillRect(x, y, 1, 1);
  }
}

Комментарии:

1. есть комментарии? о том, как я могу это исправить? я новичок в js soo

2. если мой ответ помог вам, было бы неплохо получить обратную связь 🙂

Ответ №1:

 const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const scale = 8;
const width = 785;
const height = 585;
context.fillStyle = "black";
canvas.width = width;
canvas.height = height;

context.scale(scale, scale);
context.fillRect(50, 50, 1, 1);

canvas.addEventListener("mousedown", fillc, false);

function fillc(event) {
  let canvasElem = document.querySelector("canvas");

  canvasElem.addEventListener("mousedown", getMousePosition(canvas, event));

  function getMousePosition(canvas, event) {
    context.fillStyle = "black";
    let rect = canvas.getBoundingClientRect();
    let x = Math.floor(event.clientX - rect.left) / scale;
    let y = Math.floor(event.clientY - rect.top) / scale;
    console.log("Coordinate x: "   x, "Coordinate y: "   y);
    console.log("ok");
    context.fillRect(x, y, 1, 1);
  }
}

поскольку вы определили масштаб, вам нужно разделить ваши координаты на ваш масштаб, чтобы соответствовать вашему положению 🙂

вы также можете проверить здесь: https://jsfiddle.net/pt0vxrda /

Комментарии:

1. это сработало, также я могу удалить масштаб, если я правильно закодирую значения?

2. масштаб определяет, сколько пикселей используется для отображения точки 1×1 на холсте. если вы удалите его, это будет просто 1×1 px … в настоящее время это 8×8 px. Вам не нужно масштабировать контекст ^^

3. @ilimango Если это сработало, щелкните стрелку в ответе, чтобы ответчик получил за это некоторую репутацию / кредит, это также помечает вопрос как ответ