Question

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

Answer 1

从您的问题中不清楚您是如何对中的，但是当您尝试将鼠标位置映射到{{1上的位置时，您需要考虑包含canvas的元素的任何偏移量}}。您可以在计算时添加包含元素的canvas和offsetLeft值（请参阅docs）来执行此操作。

如果您偏移offsetTop包裹div（我已经给出了一个id以便更容易引用）的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进行简单的演示。

HTML5画布（SIMPLE PAINT APPLICATION）

1 个答案: