Положение мыши выключено на HTML5 холсте? - PullRequest
Новая
       20

Положение мыши выключено на HTML5 холсте?

0 голосов
/ 11 июля 2020

Я пробовал несколько решений на SO, но они не работали для моей установки. По какой-то причине положение мыши на моем холсте отключено. Я вставил свои HTML и JS ниже для справки.

Мышь отлично работает, когда размер холста совпадает с размером окна, но мне нужно, чтобы она хорошо работала, когда она меньше или больше. Как это сделать?

HTML

<canvas id="canvas"></canvas>

JS

window.addEventListener('load', () => {
    const canvas = document.querySelector('#canvas');
    const ctx = canvas.getContext('2d');

        // canvas.height = window.innerHeight;
        // canvas.width = window.innerWidth;

        canvas.height = 540;
        canvas.width = 960;
        
        // canvas.height = canvas.offsetHeight;
        // canvas.width = canvas.offsetWidth;

    let painting = false;

    var gradient = ctx.createLinearGradient(0, 0, 170, 0);
    gradient.addColorStop("0", "magenta");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("1.0", "red");

    function windowSize() {
        // canvas.height = window.innerHeight;
        // canvas.width = window.innerWidth;
        // canvas.height = 540;
        // canvas.width = 960;
        // canvas.height = canvas.offsetHeight;
        // canvas.width = canvas.offsetWidth;
    }
    function startPosition(e) {
        painting = true;
        draw(e);
    }
    function finishedPosition() {
        painting = false;
        ctx.beginPath();
    }
    function draw(e) {
        if(!painting) return;
        ctx.lineWidth = lineSize;
        ctx.lineCap = "round";
        ctx.strokeStyle = color;

        ctx.lineTo(e.clientX, e.clientY);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(e.clientX, e.clientY);
    }

    var lineSize = 5;
    var color = "Black";

    // Event Listeners

    canvas.addEventListener('mousedown', startPosition);
    canvas.addEventListener('mouseup', finishedPosition);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('touchstart', startPosition);
    canvas.addEventListener('touchend', finishedPosition);
    canvas.addEventListener('touchmove', draw);
    // window.addEventListener('resize', windowSize);

});

1 Ответ

0 голосов
/ 11 июля 2020

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

Реальное положение мыши на холсте

...