鼠标单击时绘制到画布已关闭

Question

我的<canvas> 元素占用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);
}

#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;
}

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

Answer 1

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

Sizing the canvas
可以更改画布的显示大小 使用样式表。图像在渲染过程中被缩放以适应 风格的大小。如果您的渲染看起来失真，请尝试指定您的 属性中明确的宽度和高度属性，以及 不使用 CSS。

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

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);
}

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

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

更多参考请见：
HTML5 Canvas distorted?
Resize HTML5 canvas to fit window
HTML5 Canvas 100% Width Height of Viewport?

---

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