单击鼠标绘制到 canvas 已关闭

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 调整 canvas 的大小会拉伸其内容，类似于 <img> 的行为方式。
拉伸会偏移 canvas 相对于鼠标单击的坐标。
例如，在坐标 (5,5) 处单击可以转换为 (15,25) 的拉伸 canvas 坐标。

Sizing the canvas
The displayed size of the canvas can be changed using a stylesheet. The image is scaled during rendering to fit the styled size. If your renderings seem distorted, try specifying your width and height attributes explicitly in the attributes, and not using CSS.

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

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?

调整大小会清除 canvas，因此响应式设计将需要额外的功能。
Matthew Crumley has ideas 调整大小时 redrawing/scaling 个现有内容。

单击鼠标绘制到 canvas 已关闭

Drawing to canvas on mouse click is off

html

javascript

drawimage

onmousedown

html5-canvas