點擊HTML5 Canvas圈子

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

這是工作碼本

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