HTML5 Canvas (ПРОСТОЕ ПРИМЕНЕНИЕ КРАСКИ)

Question

Я работаю над приложением для рисования, и я пытаюсь центрировать холст на середине экрана. Любые попытки, которые я сделал, были отключены (все еще в верхнем левом углу экрана), но визуально отображались в центре экрана. В принципе, он не рисует на холсте, когда я переместил его в центр экрана. Любая помощь будет высоко ценится, спасибо .... Я ИМЕЮ мой код НИЖЕ ...

Answer 1

Это не ясно из вашего вопроса, как вы центрирования, но вы должны учитывать любое смещение элементов, укажите canvas, когда вы попытаетесь отобразить положение мыши в позиции на canvas. Вы можете сделать это, включив значения offsetLeft и offsetTop (см. docs) содержащего элемента при выполнении ваших расчетов.

Ниже будет работать, если вы компенсируя позицию div, которая облегает canvas (который я дал идентификатор, чтобы сделать его проще ссылаться):

function move(e) { 

    // Get the div containing the canvas. Would be more efficient to set this once on document load 
    var container = document.getElementById('container'); 

    if((e.button == 0) && (mouseIsDown)) { 
     g.beginPath(); 
     document.onselectstart = function(){ return false; } 
     //g.fillStyle = "red"; 
     // Account for the offset of the parent when drawing to the canvas 
     g.arc((e.x - container.offsetLeft) - brush, (e.y - container.offsetTop) - brush, brush, 0, Math.PI * 2); 
     g.fill(); 
     g.closePath(); 
    } 
} 

И упрощенным демо с помощью ваша скрипка here.