不能繪製accroding到鼠標光標的確切位置

我發現如果我不通過window.innerWidth/innerHeight線給畫布寬度和高度繪製遠遠高於實際鼠標光標。我的意思是我不能承擔給畫布窗口的整個寬度和高度。我的意思是應該有其他的divs，段落等。在這裏我給我的畫布寬度和高度分別爲400px和768px.it是不行爲，因爲它應該be.i的意思當我嘗試繪製一條線時，它出現在我的鼠標光標上方，我可以修復它嗎？不能繪製accroding到鼠標光標的確切位置

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Game Stage</title> 
<script type="text/javascript"> 
var i=0; 
var radius=10; 

var lines; 
var x,y; 
var now_draw=false; 
var i=0; 
    function loadCanvas(id) { 
     var canvas = document.createElement('canvas'); 
     div = document.getElementById(id); 
     canvas.id  = "CursorLayer"; 
     canvas.width = 400; 
     canvas.height = 768; 
     canvas.style.zIndex = 8; 
     canvas.style.position = "absolute"; 
     canvas.style.border = "1px solid"; 
     div.appendChild(canvas) 
    } 
    function nowdraw(e){ 

now_draw=true; 

} 
function drawit(e){ 

if(now_draw){ 

var ctx=document.getElementById("CursorLayer").getContext("2d"); 
x=e.clientX; 
y=e.clientY; 
if(i==0){ 
ctx.lineWidth=2*radius; 
ctx.lineTo(x,y); 
ctx.stroke(); 

} 
if(i>0){ 

ctx.fillStyle="red"; 
ctx.beginPath(); 
ctx.arc(x,y,radius,0,2*Math.PI); 
ctx.fill(); 
i=0; 

} 
ctx.fillStyle="red"; 
ctx.beginPath(); 
ctx.arc(x,y,radius,0,2*Math.PI); 
ctx.fill(); 
ctx.lineWidth=2*radius; 
ctx.strokeStyle="red"; 
ctx.beginPath(); 
ctx.moveTo(x,y); 
} 

} 
function cannotdraw(){ 
now_draw=false; 
i++; 

} 

window.onmousedown=nowdraw; 
window.onmousemove=drawit; 
window.onmouseup=cannotdraw; 
     </script> 
</head> 
<body> 

    <h1>draw here</h1> 


<div id="divControls"></div> 
<div id="divGameStage"></div> 
<script type="text/javascript"> 
    loadCanvas("divGameStage"); 
</script> 
</body> 
</html>

小提琴：jsfiddle

來源

2014-04-18 AL-zami

注意'mousemove'事件處理程序是昂貴的。在需要的時候更好地添加和刪除它們，而不是使用布爾型'now_draw' – Oriol

使用

x = e.offsetX || e.layerX || 0; 
y = e.offsetY || e.layerY || 0;

代替

x = e.clientX; 
y = e.clientY;

Demo

來源

2014-04-18 22:35:08 Oriol

x = e.offsetX || e.layerX || 0; y = e.offsetY || e.layerY || 0;它的工作原理，但它實際上是什麼意思？有三種選擇，哪一種會在什麼時候觸發？你能解釋一下嗎？ –

@ user3138436 ['offsetX']（http://www.w3.org/TR/cssom-view/#dom-mouseevent-offsetx）和['offsetY']（http://www.w3.org/TR/cssom-view /＃dom-mouseevent-offsety）相對於目標返回座標，而不是像'clientX'和'clientY'這樣的視口。但Firefox支持['layerX']（https://developer.mozilla.org/en-US/docs/Web/API/event.layerX）和['layerY']（https://developer.mozilla.org/取而代之的是en-US/docs/Web/API/event.layerY）。 – Oriol

不能繪製accroding到鼠標光標的確切位置

回答

相關問題