畫布畫中心，擦除不能正常工作

我寫了一個JavaScript，允許用戶使用鼠標在HTML5畫布上繪製（類似於MS Paint）。畫布畫中心，擦除不能正常工作

現在，我有2個問題：

如果HTML5 canvas元素定位在左上角的繪圖功能只適用於（0，0）的網頁，否則它不」根本不工作或圖紙偏離中心。
我無法抹掉繪圖。當我開始再次繪圖時，當它擦除繪圖時，它將會消失，但它會回來。

我的代碼如下：

HTML畫布

<canvas id="can1" width="500" height="500"></canvas>1

的JavaScript畫布繪製

// Variables 
var x1; 
var y1; 
var isPressed = false; 
var myCanvas; 
var myContext; 

function startCanvas() { 

    // Canvas stuff 
    myCanvas = document.getElementById("can1"); 
    myContext = myCanvas.getContext("2d"); 

    // Specify a black background, and white lines that are 3 pixels thick. 
    myContext.fillStyle = '#fff'; 
    myContext.strokeStyle = '#fff'; 
    myContext.fillRect(0, 0, 500, 500); 
    myContext.lineWidth = 3; 
    myContext.fill(); 
} 

function functionMouseDown(e) { 
    // Get coordinates 
    x1 = e.clientX 
    y1 = e.clientY; 

    isPressed = true; 
} 

function functionMouseMove(e) { 
    // If mouse is down and moved start drawing line 
    if (isPressed == true) { 
     drawLine(e); 
    } 
} 

function functionMouseUp() { 
    // Stop drawing line 
    isPressed = false; 
    //myContext.closePath(); 
    //myContext.stroke(); 
} 

function drawLine(e) { 
    // Draw line 
    var x = e.clientX; 
    var y = e.clientY; 

    myContext.strokeStyle = '#cc0000'; 
    myContext.lineWidth = 1; 
    myContext.moveTo(x1, y1); 
    myContext.lineTo(x, y); 
    myContext.stroke(); 

    // Set start coordinates to current coordinates 
    x1 = x; 
    y1 = y; 
}

的JavaScript，我用它來擦除畫布：

myContext.clearRect(0, 0, 500, 500);

來源

2012-12-06 user1822824

結構良好的問題，但您可能想更改標題以反映您的實際問題。另外，當你計算'''''''''''''''''''''''''時，看起來你並沒有補償畫布本身的位置。 – iono

的最簡單的解決方案是設置關閉設置使用myCanvas.offsetLeft和myCanvas畫布。的offsetTop。

來源

2012-12-06 06:08:23 user1822824

我用下面的函數來完成此

function relMouseCoords(event){/*needs fixing for general case*/ 
    var totalOffsetX = 0 
    var totalOffsetY = 0 
    var canvasX = 0 
    var canvasY = 0 
    var currentElement = this 

    do{ 
     totalOffsetX += currentElement.offsetLeft 
     totalOffsetY += currentElement.offsetTop 
    } 
    while(currentElement = currentElement.offsetParent) 

    canvasX = event.pageX - totalOffsetX 
    canvasY = event.pageY - totalOffsetY 

    return {x:canvasX, y:canvasY} 
} 

HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

然後

var cord = e.target.relMouseCoords(e); 
x1 = cord.x; 
y1 = cord.y; 
... 
var cord = e.target.relMouseCoords(e); 
var x = cord.x; 
var y =cord.y;

http://jsfiddle.net/mowglisanu/u3rvT/1/

來源

2012-12-06 03:08:15 Musa

畫布畫中心，擦除不能正常工作

回答

相關問題