在画布上绘制时位置不正确 - HTML 和 JAVASCRIPT答案

【问题标题】：incorrect position when drawing over canvas - HTML & JAVASCRIPT在画布上绘制时位置不正确 - HTML 和 JAVASCRIPT
【发布时间】：2017-07-01 09:26:37
【问题描述】：

我在绘图画布中有一张图片，我在代码中将其设置为如下所示：

<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>

那么，问题可能是什么？我错过了什么！提前致谢

【问题讨论】：

标签： javascript html canvas drawing

【解决方案1】：

首先，您对画布的 css height 使用了无效值，即 300 应该是 300px。

即便如此，您仍在使用 css 拉伸画布，这不会将像素添加到画布缓冲区。您可以通过使用ctx.fillRect( 10, 10, 30, 30 ) 在画布上绘制一个正方形来测试这一点：您将看到它实际上是一个矩形。您需要采取措施来抵消这种情况。

我假设您并不是要使用 css 缩放画布并希望您的正方形是正方形。在这种情况下，您所知道的是您希望画布的宽度与父级的宽度相同，因此您可以从字面上做到这一点：

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

此时，您的画布将具有父级的完整宽度以及正确的像素纵横比，但会出现一个问题是您的画布的内容将被重绘，因为更改 width 和 @987654327通过 javascript 元素变量的画布的 @ 将导致绘图缓冲区的重置。您无需过多担心这意味着什么，但您仍然需要找到一种方法来保留这些内容，如果这是您的目标的话。

一个相当明智的解决方案是创建一个虚拟画布

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

然后在调整大小事件侦听器中更改canvas.width 之前，将virtualCanvas 的宽度设置为调整大小之前的画布宽度，然后简单地在虚拟画布上绘制当前画布来存储它，@987654331 @。您不会遇到 Alpha 通道的问题，很可能，因为更改 virtualCanvas 的宽度也会删除其中的所有内容。

此时，您只需将virtualCanvas 的图纸读入canvas 和ctx.drawImage( virtualCanvas, 0, 0 );，就可以了！

【讨论】：