Question

我的100vw元素占用100vh和//var count1 = (Math.floor(Math.random() * screen.width)) + 1; //var count2 = (Math.floor(Math.random() * screen.height)) + 1; function onCanvasClick() { var image = document.getElementById("image"); var xLoc = event.clientX; var yLoc = event.clientY; var loc = "xLoc is: " + xLoc + " | yLoc is: " + yLoc; console.log(loc); var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.drawImage(image, xLoc, yLoc); }。我希望能够点击它上面的任何地方并在那里画一幅画。现在，当我点击屏幕时，图像不会在我点击的位置附近绘制。我越接近左上角，越接近它。但是，如果我稍微偏离角落，图像就会被推到极右下方。

我如何计算我似乎需要的偏移量才能使图像准确地绘制到我点击的位置？

＆＃13;

#myCanvas {
  width: 99vw;
  height: 99vh;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(58, 154, 221, 0.3);
}

#image {
  width: 100px;
  height: 100px;
  display: none;
}

＆＃13;

<canvas id="myCanvas" onmousedown="onCanvasClick()">You dont support this!</canvas>
<img id="image" src="//lorempixel.com/100/100/abstract/5/"></img>

＆＃13;

{{1}}

＆＃13;

Answer 1

使用CSS调整画布大小会拉伸其内容，类似于<img>的行为方式拉伸相对于鼠标单击偏移画布坐标例如，坐标（5,5）处的单击可以转换为拉伸的画布坐标（15,25）。

Sizing the canvas
可以更改画布的显示大小使用样式表。在渲染过程中缩放图像以适合风格大小。如果你的效果图看起来很扭曲，请尝试指定你的属性中显式显示宽度和高度属性不使用CSS。

您可以通过JavaScript设置画布尺寸，以使其填充视口。

＆＃13;

var image = document.getElementById("image");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

c.width = window.innerWidth;
c.height = window.innerHeight;

function onCanvasClick() {
  var xLoc = event.clientX;
  var yLoc = event.clientY;
  ctx.drawImage(image, xLoc, yLoc);
}

＆＃13;

body {
  margin: 0;
}
#myCanvas {
  display: block;
  background-color: rgba(58, 154, 221, 0.3);
}
#image {
  display: none;
}

＆＃13;

<canvas id="myCanvas" onmousedown="onCanvasClick()" width="100%" height="100%">You dont support this!</canvas>
<img id="image" src="//lorempixel.com/50/50/abstract/5/"></img>

＆＃13;

有关详细参考，请参阅：
HTML5 Canvas distorted?
Resize HTML5 canvas to fit window
HTML5 Canvas 100% Width Height of Viewport?

调整大小将清除画布，因此响应式设计将需要其他功能 Matthew Crumley has ideas用于在调整大小时重新绘制/缩放现有内容。

关闭鼠标单击画布到画布

1 个答案: