JavaScript畫布在錯誤的座標下繪圖

我在HTML中有一個畫布，當我在瀏覽器窗口處於標準尺寸時繪製畫布時，它可以正常工作，但是當您開始縮放窗口時（即收縮它），在畫布上繪畫並不會出現在其意圖的位置。JavaScript畫布在錯誤的座標下繪圖

var mousePressed = false; 
 

 
var canvas = document.getElementById("canvas"); 
 
var lastX; 
 
var lastY; 
 
var colour = "black"; 
 
var size = 3; 
 

 

 
function clear1() { 
 
    var context = canvas.getContext("2d"); 
 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 
} 
 

 

 
canvas.addEventListener("mousedown", (function(e) { 
 
    var xpos = e.pageX - this.offsetLeft; 
 
    var ypos = e.pageY - this.offsetTop; 
 

 
    mousePressed = true; 
 

 
    draw(xpos, ypos, false); 
 
})); 
 

 
canvas.addEventListener("mouseup", (function(e) { 
 
    mousePressed = false; 
 
})); 
 

 
canvas.addEventListener("mousemove", (function(e) { 
 
    var xpos = e.pageX - this.offsetLeft; 
 
    var ypos = e.pageY - this.offsetTop; 
 

 
    if (mousePressed) { 
 
    draw(xpos, ypos, true); 
 
    } 
 

 
})); 
 

 

 

 
function draw(x, y, isDown) { 
 
    if (isDown) { 
 
    context = canvas.getContext("2d"); 
 
    context.beginPath(); 
 
    context.strokeStyle = colour; 
 
    context.lineWidth = size; 
 
    context.lineJoin = "round"; 
 
    context.moveTo(lastX, lastY); 
 
    context.lineTo(x, y); 
 
    context.closePath(); 
 
    context.stroke(); 
 
    } 
 
    lastX = x; 
 
    lastY = y; 
 

 
}

#canvas { 
 
    border: 2px solid black; 
 
    background-color: white; 
 
    margin: auto; 
 
    display: block; 
 
    width: 200px; 
 
    height: 100px; 
 
}

<canvas id="canvas" width="200" height="100"> 
 

 
</canvas> 
 

 
<button onclick="clear1()" type="Submit1">Clear</button> 
 

 
<input name="Submit" id="submitButton" type="submit" onclick="sendPayment()" value="Send Payment">

來源

2016-01-03 Andrew1996

好感謝，我已經完成:) – Andrew1996

我已經修復了堆棧片段/代碼塊的事情。 –

您的代碼適用於Chrome，Firefox和IE11。縮放「Ctrl +」和「Ctrl-」縮放，繪圖仍然跟蹤我的光標，無論是縮小還是擴大視圖。 –

從Kaiido's comment：

不要設置畫布寬度/高度，通過CSS，用它自己的width和height屬性直接

來源

2016-05-13 23:49:10 Bim

JavaScript畫布在錯誤的座標下繪圖

回答

相關問題