CSSだけで自由に直線を描く

TFujinami

License: MIT License

Fork
0
Fav
1
View
5448
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 70 lines
  • HTML 2 lines
  • CSS 17 lines
HTML5 CanvasやSVGを使わずに、CSSだけで自由に直線を描きます。
白いエリア内をマウスを動かしながら何度かクリックしてください。
Webkit系を見てください。

具体的にはボックスの一辺だけにボーダーを描き、台形で変形させています。
CSS3 TransformのSkewは角度はきついと線が細くなりすぎて見えないので、
45度を境にSkewとSkewYを使い分けています。

参考にしたサイト:
高精度計算サイト - 底辺と高さから角度と斜辺を計算 http://goo.gl/Uze8f
trick7 - 〜度回転させた後の_xと_yを求める方法 http://www.trick7.com/blog/2006/06/27-230619.php
とほほのJavaScriptリファレンス - 数学関数 http://www.tohoho-web.com/js/math.htm#tri
The Shapes of CSS http://css-tricks.com/examples/ShapesOfCSS/
  • CSSだけで自由に直線を描く
  • jQuery v1.5.0
  • CSSだけで自由に直線を描く

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

TFujinami

Author

藤浪剛士 | Tsuyoshi Fujinami

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by