When writing an h5 canvas game, the position of the button clicked changed after the screen was adapted.

Today, when I played an h5 game, after adapting, the size of the canvas changed, but some buttons inside found that they could not be clicked, and only when they clicked somewhere else could they react. What is the reason for this?

Html5
Mar.10,2021
To achieve the click effect on

canvas , it must be achieved by calculating the click position.
and after you have adapted, if you want to click on the hot area remains the same, you need to get your standard width and height and the width and height of the current page to calculate, get the correct zoom ratio, and then modify the click on the hot area.

something like this: 

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')
  }
})

Previous: Why can't the value returned by echarts dynamic request render the chart?

Next: Cannot get data value in vue methods

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu