Question

基本上，我有一个代码可以显示用户在画布上单击的位置：

canvas.onclick = function(e){
    ctx.fillRect(e.clientX,e.clientY,10,10);
}

如果我在代码中包含此代码，它将很好地工作：

canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

但是我希望画布的宽度和高度为200！像这样：

canvas.width = 200;
canvas.height = 200;

每当我尝试此操作时，点击都会出错！我如何在全屏画布上设置200的宽度而不调整其大小或窗口的大小？？

Answer 1

我认为您所缺少的只是减去画布的偏移量...

这是一个代码示例

var canvas = document.getElementById('can');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 2, 2);

canvas.onclick = function(e) {
  r = 10
  x = e.clientX - canvas.offsetLeft - r
  y = e.clientY - canvas.offsetTop - r
  ctx.fillRect(x, y, r, r);
}

body {
  margin: 0
}

<canvas id="can" style="border:1px solid #000000;"></canvas>

HTML5 Canvas无法正确显示点击

1 个答案: