写h5画布游戏的时候,屏幕做了自适应之后,点击按钮的位置发生了改变.

Question

今天做一个h5游戏的时候,做了自适应之后,画布的大小改变了,可里面的有些按钮发现点击不了,点击其他地方才有反应,是什么原因造成的呢?

Answer 1

canvas上实现click效果，必然是通过计算点击位置实现的。
而你做了自适应以后，想要点击的热点区域不变的话，就需要拿到你的标准宽高与当前页面的宽高进行计算，得出正确的缩放比例后，然后修改点击的热点区域。

类似这样的：

const standardWidth = 1920

let widthScaleRatio = window.screen.availWidth / standardWidth

let triggerXRange = [0, 800]
$canvas.click(e => {
  if (e.clientX >= triggerXRange[0] * widthScaleRatio && e.clientX <= triggerXRange[1] * widthScaleRatio) {
    console.log('trigger')
  }
})