代码之家 › 专栏 › 技术社区 › skyleguy

鼠标单击绘制到画布关闭

onmousedown drawimage html5-canvas html javascript

skyleguy · 技术社区 · 7 年前

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

1 回复 | 直到 7 年前

showdev 7 年前

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

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