HTML 5画布不能正确显示点击量怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (95)

基本上,我有一个代码,显示用户在画布上单击的位置:

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的宽度呢?

提问于
用户回答回答于

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

试试这个:

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>

扫码关注云+社区

领取腾讯云代金券