【重要】サービス終了のお知らせ

Fork
1
Fav
1
View
2468
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • ES6 7 lines
  • HTML 40 lines
  • CSS 17 lines

css付きのcanvasの座標ズレを無くす

cssでwidthとheightが設定されたcanvasは、clickイベント等で取得される座標が内部的な値とズレることがあります。
今回は、そのズレを丸める関数を単体で作りました。
(過去に私が作成したゲームにも使われてます)

今回はcanvas.widthとcanvas.heightは200に、cssのwidthとheightは400pxにそれぞれ設定されています。
見かけ上の大きさと、キャンバスコンテキストのサイズが異なるため、普通にイベントから座標の取得を試みると値がズレます。
しかし、getAdjustedPosition関数で座標のズレを丸めているため、見かけ上の押した位置に星が描画されると思います。

  • css付きのcanvasの座標ズレを無くす
  • css付きのcanvasの座標ズレを無くす

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

MICKey

Author

  • Twitter
  • Github

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by