javascript - 点击 HTML5 Canvas 圆圈

Question

我最近一直在研究 HTML5 canvas，我想做的其中一件事就是创建一个简单的页面，其中的 canvas 会在您点击的任何地方绘制一个圆圈。我有一些看起来应该可以工作的代码，并且我一直在尝试使用一些控制台输出进行调试，但目前我还看不到任何错误。

虽然我使用的是 Codepen，所以我不确定该控制台的功能有多全面，不幸的是，我目前无法在我的笔记本电脑(锁定学校 Chromebook)上使用开发控制台。

有人可以看一下吗？我会把代码放在这里，同时也放一个笔的链接。谢谢!

HTML:

<canvas id="canvas" onclick="drawCircle(event)"></canvas>

CSS:

canvas {
  position: relative;
  background: #f1c40f;
  width: 100%;
  height: 100%;
}

JS:

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

function drawCircle(e) {
  var pos = getCursorPosition(c, e);
  var clickX = pos.x;
  var clickY = pos.y;

  ctx.fillStyle = "#2980b9";
  ctx.beginPath();
  ctx.arc(clickX, clickY, 10, 0, 2 * Math.PI);
  ctx.fill();

  console.log(clickX, clickY);
  console.log("drawcircle");
}

function getCursorPosition(canvas, e) {
  // Gets click position
  rect = canvas.getBoundingClientRect();

  console.log('getcursorpos');

  return {
    x: e.clientX - rect.left, 
    y: e.clientY - rect.top
  };
}

Codepen 链接:https://codepen.io/wolverine1621/pen/gWvjgx

感谢任何帮助。这可能是一件非常简单的事情，但这确实是我第一次使用 Canvas ，所以任何输入都是有帮助的!

谢谢!

Answer 1

出现此问题是因为您使用 css 设置了 Canvas 的 width 和 height。

你应该使用 javascript 来设置它，就像这样......

c.width = window.innerWidth;
c.height = window.innerHeight;

并使 Canvas 灵活，以保持其大小，使用 ...

window.onresize = function() {
  c.width = window.innerWidth;
  c.height = window.innerHeight;
}

这是 working codepen