首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML5画布无法正确显示点击

HTML5画布无法正确显示点击
EN

Stack Overflow用户
提问于 2018-08-16 14:55:52
回答 1查看 47关注 0票数 2

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

代码语言:javascript
复制
canvas.onclick = function(e){
    ctx.fillRect(e.clientX,e.clientY,10,10);
}

如果我在代码中包含这段代码,它就能很好地工作:

代码语言:javascript
复制
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

但是我希望画布的宽度和高度都是200!如下所示:

代码语言:javascript
复制
canvas.width = 200;
canvas.height = 200;

每当我尝试这样做时,点击都会出错!如何在不调整全屏画布或窗口大小的情况下使全屏画布的宽度为200?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-16 22:34:46

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

下面是一个代码示例

代码语言:javascript
复制
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);
}
代码语言:javascript
复制
body {
  margin: 0
}
代码语言:javascript
复制
<canvas id="can" style="border:1px solid #000000;"></canvas>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51871233

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档