html - HTML5 画布（简单的油漆应用）

Question

我正在开发一个绘画应用程序，我正在尝试将画布居中放在屏幕中间。我进行的任何检测尝试都已关闭（仍在屏幕的左上角），但它在视觉上出现在屏幕的中心。基本上，当我将它移到屏幕中央时，它不会绘制到画布上。任何帮助将不胜感激，谢谢....我有我的代码...

Answer 1

从您的问题中不清楚您如何将其居中，但是canvas当您尝试将鼠标位置映射到canvas. 您可以通过在进行计算时包含包含元素 的offsetLeft和offsetTop 值（请参阅文档）来做到这一点。

div如果您要偏移包装的位置，则以下内容将起作用canvas（我已经给出了一个 id 以便于参考）：

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();
    }
}

还有一个使用你的小提琴的简单演示。