Question

我最近一直在玩HTML5画布，我想做的其中一件事就是创建一个带有画布的简单页面，无论你在哪里点击都会画一个圆圈。我有一些代码看起来应该可以工作，而且我一直尝试使用某些控制台输出进行调试，但我目前还没有看到任何错误。

我虽然使用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 设置了画布的width和height。

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

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

并使画布具有弹性，以便保持其尺寸，使用......

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

以下是 working codepen

Answer 2

有几件事：

1）你没有为画布设置宽度和高度，所以会出现失真，x / y值会很奇怪。解决方案：将画布的宽度和高度设置为窗口高度和宽度

2）确定clickX和clickY的方法过于复杂。解决方案：使用event.clientX和event.clientY

获取上下文后，设置宽度和高度：

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

注意：我还建议您删除CSS中正文上的边距

 body { margin: 0 }

现在你可以摆脱getCursorPosition（因为它给你错误的值）

var clickX = e.clientX
var clickY = e.clientY

单击

2 个答案: