不正確的位置 - HTML和Javascript

我有一個繪圖畫布和IM的圖片將其設置爲下面顯示的代碼：不正確的位置 - HTML和Javascript

<div class="two40"> 
    <img class = "hidden" src="lungs.PNG"width="100%" height="300" id="lungs"> 
    <canvas height="300px" style="background:transparent; width: 100%; height: 300" id="specialLung"></canvas> 
</div> 


function draw(){     
    var drawing = document.getElementById("specialLung"); 
    var con = drawing.getContext("2d"); 
    var image = document.getElementById("lungs"); 
    con.drawImage(image, 0, 0, drawing.offsetWidth, 300); 

}

在這裏的目標是繪製在一個圓圈鼠標點擊的位置。我所面臨的問題是，圓圈的繪製位置與鼠標的點擊位置不同，它的左上角有一個偏移量。

畫布如果放在div下。具有以下結構

<div> 
    <div> 
    !!some code  
    <div> 
    <div> 
    !!Canvas and picture code 
    </div> 
<div>

那麼，問題是什麼？什麼即時失蹤！在此先感謝

來源

2017-02-13 Ali Alebrahim

要開始，你使用無效值畫布的CSS height，那300應300px。

即使這樣，你仍然在用css伸展畫布，而不是將畫素添加到畫布緩衝區。你可以通過使用ctx.fillRect(10, 10, 30, 30)在畫布上畫一個正方形來測試它：你會發現它實際上是一個矩形。你需要做點什麼來抵消這一點。

我打算假設你並不是想用css縮放畫布，並且希望你的方格是正方形。在這種情況下，你知道什麼是你想要的畫布的寬度是相同的父的寬度，所以你可以從字面上做：

parentElement.addEventListener('resize', function(){ canvas.width = parentElement.getBoundingClientRect().width });

在這一點上，你的畫布具有正確的像素寬高比的父寬度，但會出現的問題是您的畫布內容將被重繪，因爲通過javascript元素的變量更改畫布的width和height將導致重置的繪圖緩衝區。您不必擔心這意味着什麼，但是您仍然需要找到一種方法來保留這些內容，如果這就是您的目標。

一個相當明智的解決辦法是在調整之前創建一個虛擬畫布

var virtualCanvas = document.createElement('canvas'), 
    virtualCtx = virtualCanvas.getContext('2d'); 
virtualCanvas.height = canvas.height; // or 300

然後在resize事件監聽器改變canvas.width之前，您設置virtualCanvas到畫布的寬度的寬度，並簡單地畫當前畫布上的虛擬人物將其存儲，並使用virtualCtx.drawImage(canvas, 0, 0);。你不會遇到alpha通道的問題，很可能，因爲改變virtualCanvas的寬度也將刪除它中的所有內容。

此時，您需要做的就是將virtualCanvas的圖紙讀到canvas與ctx.drawImage(virtualCanvas, 0, 0);，而您是黃金！

來源

2017-02-13 16:53:58 towc

不正確的位置 - HTML和Javascript

回答

相關問題