Question

我在绘图画布中有一张图片，我在下面的代码中设置它：

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

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

Answer 1

首先，您要为画布的height使用无效值，300应为300px。

即便如此，你还是用css拉伸画布，而不是在画布缓冲区中添加像素。你可以使用ctx.fillRect( 10, 10, 30, 30 )在画布上画一个正方形来测试它：你会发现它实际上是一个矩形。你需要做点什么来抵消这个。

我会假设你并不意味着用css缩放画布并希望你的方块是正方形。在这种情况下，你知道的是你希望画布的宽度与父画面的宽度相同，所以你可以这样做：

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

此时，您的画布将具有正确像素长宽比的父画布的全宽，但是会出现的问题是画布的内容将被重绘，如更改width和画布的height通过javascript元素的变量将导致绘图缓冲区的重置。你不需要担心这意味着什么，但你仍然需要找到一种方法来保存这些内容，如果这是你的目标。

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

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 );，并且您已经金色了！

在画布上绘图时位置不正确 - HTML＆amp; JAVASCRIPT

1 个答案: