javascript - 在 Canvas 中显示坐标 - JavaScript

Question

我试图让这个 JavaScript 在 Canvas 中显示客户端鼠标的坐标，然后在用户单击的位置创建形状。每次单击时，形状颜色应该在红色、蓝色和绿色之间旋转。我无法测试形状绘图，因为坐标由于某种原因无法工作。我更感兴趣的是让代码正常工作，而不是使其达到最佳状态。

var colors = ["red", "blue", "green"];
var index = 0;

function showCoords(event) {
  console.log(event);
  var x = event.clientX;
  var y = event.clientY;
  document.getElementById("mouse_position").innerHTML = x + ", " + y;
}

function clearCoor(event) {
  console.log(event);
  document.getElementById("mouse_position").innerHTML = "";
}

function drawShape(event) {
  var x = event.clientX;
  var y = event.clientY;
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var circle = document.getElementById("circle");
  var square = document.getElementById("square");
  var triangle = document.getElementById("triangle");
  var length = colors.length();
  var index = 0;
  var color = colors[index];
  if (index >= length) {
    index = 0;
  } else {
    index++;
  }

  if (circle.checked == true) {
    ctx.beginPath();
    ctx.arc(x, y, 25, 0, 2 * Math.PI);
    ctx.fillStyle = color;
    ctx.fill();
  }

  if (square.checked == true) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, 50, 50);
  }

  if (triangle.checked == true) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + 25, y - 50);
    ctx.lineTo(x - 50, y - 50);
    ctx.closePath();
    ctx.strokeStyle = color;
    ctx.stroke();
  }
}

function clearCanvas() {
  fillStyle = white;
  fillRect(0, 0, canvas.width, canvas.height);
}

<canvas onclick="drawShape(event)" onmousemove="showCoords(event)" onmouseout="clearCoor(event)" id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

<form action="">
  <input type="radio" id="circle" name="shape" value="circle" checked="checked">Circle
  <br>
  <input type="radio" id="square" name="shape" value="square">Square
  <br>
  <input type="radio" id="triangle" name="shape" value="triangle">Triangle
</form>

<button type="button" onclick="clearCanvas()">Clear Canvas</button>

<div id="mouse_position"></div>

Answer 1

您的 JS 中有几个错误。

• 使用colors.length而不是colors.length()

• 从 drawShape 函数中删除 var index = 0。

• 您的index增量代码不太正确。

• 使用 event.page(X|Y) 获取准确的坐标。

下面的代码可以正常工作。

var colors = ["red", "blue", "green"];
var index = 0;

function showCoords(event) {
  //console.log(event);
  var x = event.clientX;
  var y = event.clientY;
  document.getElementById("mouse_position").innerHTML = x + ", " + y;
}

function clearCoor(event) {
  //console.log(event);
  document.getElementById("mouse_position").innerHTML = "";
}

function drawShape(event) {
  console.log(event);
  var canvas = document.getElementById("myCanvas");
  var x = event.pageX - canvas.offsetLeft;
  var y = event.pageY - canvas.offsetTop;
  var ctx = canvas.getContext("2d");
  var circle = document.getElementById("circle");
  var square = document.getElementById("square");
  var triangle = document.getElementById("triangle");
  var length = colors.length;
  var color = colors[index];
  if (++index >= length) {
    index = 0;
  }
  
  if (circle.checked == true) {
    ctx.beginPath();
    ctx.arc(x, y, 25, 0, 2 * Math.PI);
    ctx.fillStyle = color;
    ctx.fill();
  }

  if (square.checked == true) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, 50, 50);
  }

  if (triangle.checked == true) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + 25, y - 50);
    ctx.lineTo(x - 50, y - 50);
    ctx.closePath();
    ctx.strokeStyle = color;
    ctx.stroke();
  }
}

function clearCanvas() {
  fillStyle = white;
  fillRect(0, 0, canvas.width, canvas.height);
}

<canvas onclick="drawShape(event)" onmousemove="showCoords(event)" onmouseout="clearCoor(event)" id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

<form action="">
  <input type="radio" id="circle" name="shape" value="circle" checked="checked">Circle
  <br>
  <input type="radio" id="square" name="shape" value="square">Square
  <br>
  <input type="radio" id="triangle" name="shape" value="triangle">Triangle
</form>

<button type="button" onclick="clearCanvas()">Clear Canvas</button>

<div id="mouse_position"></div>