タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

javascriptと直線に関するalocoholic_babayのブックマーク (1)

  • javascriptで直線を描画(非canvas) - alocoholic_babay's diary

    javascriptで線を描画したい。 斜めにも描画したい。 しかし、諸事情でcanvasは使えない。 そんな時、どうしますか? 1pxのDivを繋げて線を描画する手法もありますが、 なんかギザギザになるし・・・。 で、考えたのですがborder-topを指定したDivをrotateさせれば 斜めの線も引けるんじゃない? 点1(x1, y1)と点2(x2, y2)の2点に線を描画しようと考える場合、 まず線の長さは、 Math.sqrt(Math.pow((param.x1 - param.x2) ,2) + Math.pow((param.y1 - param.y2) ,2))で求められます。 次に、2点間の角度ですが逆三角関数を使用することで求められます。 Math.atan(高さ / 底辺)求められる数値はラジアンなので、℃に変換すれば、 CSS3のtransform(deg) で傾

    javascriptで直線を描画(非canvas) - alocoholic_babay's diary
  • 1