javascript - 通过单击 Canvas 上的两个点绘制矩形

Question

我试图通过单击 Canvas 上的两个点来绘制一个矩形。我需要获取第一个点的 x、y 坐标，然后在第二次单击时使用 strokeRect 绘制矩形。

这是我目前所拥有的。

var rectangle = 0;

function plot_pt(event){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
if(rectangle==1){
  ctx.moveTo(clx, cly);
  clx = event.clientX-c.offsetLeft;
  cly = event.clientY-c.offsetTop;
if(rectangle != 0){
rectangle++;
} else {
ulx = event.clientX-c.offsetLeft;
uly = event.clientY-c.offsetTop;
ctx.beginPath();
ctx.moveTo(ulx, uly);
ctx.strokeRect(50, 50, 120, 140);
ctx.stroke();

Answer 1

这就是您所需要的。只需要妥善处理您的条件。

var rectangle = 0;

function plot_pt() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  if (rectangle == 0) {
    clx = event.clientX - c.offsetLeft;
    cly = event.clientY - c.offsetTop;
    ctx.moveTo(clx, cly);
    rectangle++;
  } else {
    ulx = event.clientX - c.offsetLeft;
    uly = event.clientY - c.offsetTop;
    ctx.beginPath();
    ctx.moveTo(ulx, uly);
    ctx.strokeRect(clx, cly, ulx - clx, uly - cly);
    ctx.stroke();
    rectangle = 0;
  }
}

canvas{
border:2px solid black;
}

<canvas id="myCanvas" height="400" width="400" onclick="plot_pt()"></canvas>

如果您需要固定高度，只需将 ctx.strokeRect(clx, cly, ulx - clx, uly - cly); 更改为 ctx.strokeRect(clx, cly, ulx - clx, 100); 或您想要的高度和类似的宽度。希望对您有所帮助。