HTML5画布无法正确显示点击
HTML5画布无法正确显示点击
提问于 2018-08-16 14:55:52
基本上，我有一个代码来显示用户在画布上单击的位置：
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？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-16 22:34:46
我认为你所缺少的就是减去画布的偏移量...
下面是一个代码示例
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51871233
复制相关文章
相似问题
腾讯云开发者
