캔버스가 중앙에서 그리기, 지우기가 올바르게 작동하지 않음

사용자가 HTML5 캔버스에서 마우스로 그림을 그릴 수있는 JavaScript를 작성했습니다 (MS 그림판과 유사).캔버스가 중앙에서 그리기, 지우기가 올바르게 작동하지 않음

는 지금, 나는이 문제가 :

에서 HTML5 캔버스 요소가 왼쪽 상단에 위치하면 그리기 기능은 작동

(0, 0) 웹 페이지로, 그렇지 않으면 '아무튼 전혀 작동하지 않거나 도면이 중앙에서 벗어났습니다.
도면을 지울 수 없습니다. 드로잉을 지울 때 지우지 만 다시 드로잉을 시작하자마자 돌아옵니다.

내 코드는 다음과 같습니다 :

HTML 캔버스 나는 캔버스 삭제하는 데 사용하는 캔버스 그리기

// 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; 
}

자바 스크립트

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

자바 스크립트 :

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

을 51,515,

출처

2012-12-06 user1822824

잘 구조화 된 질문이지만 실제 문제를 반영하기 위해 제목을 변경하고 싶을 수 있습니다. 또한'''x'' 및'''y''를 계산할 때 캔버스 자체의 위치를 보완하지 않는 것처럼 보입니다. – iono

달성하기 위해 다음 함수를 사용한다. offsetTop.

출처

2012-12-06 06:08:23 user1822824

내가 가장 간단한 해결책은 myCanvas.offsetLeft 및 myCanvas를 사용 캔버스의 설정 해제를 설정하는 이러한

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

캔버스가 중앙에서 그리기, 지우기가 올바르게 작동하지 않음

답변

관련 문제