CanvasRenderingContext2D.prototype

ethertank

License: MIT License

Fork
0
Fav
1
View
910
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 195 lines
  • HTML 3 lines
  • CSS 16 lines

CanvasRenderingContext2D のメソッド

ctx.rotateContext( 回転角度, 回転の中心軸のx座標, y座標 );

ネイティブメソッドの rotate は左上を中心座標として回転する為、扱いづらい。 この関数を使えば中心座標を指定して回転する事が出来る。

ctx.clipWithFunction( 関数 );

指定関数内で描画した図形で既存コンテキストを切り抜く。要らん気もする。

var points = ctx.getPolygonPoints( 中心のx座標, 〃y座標, 半径, 何角形?, 回転角度 );

多角形の座標配列 [x, y] を子とする二次元配列を返す。「回転角度」は省略可。省略時は 0 となり、0 の場合、必ず頂点が上になる。

ctx.polygon( x, y, radius, edgesNum, deg );

引数は getPolygonPoints と同じ。多角形パスを作成。

ctx.fillPolygon( x, y, radius, edgesNum, deg );

引数は getPolygonPoints と同じ。塗りつぶしまで行う。

ctx.strokePolygon( x, y, radius, edgesNum, deg );

同上。但し塗りつぶしではなく線を描画。

ctx.drawPolygon( x, y, radius, edgesNum, deg );

同上。コンテキストの設定に従い塗りと線を描画。

ctx.ellipse( 左上座標x、左上座標y、右下座標x、右下座標y );

座標を指定し、楕円のパスを作成。自作では無い。 (※ http://spphire9.wordpress.com/2010/03/08/ベジェ曲線で楕円を描く3/ )

ctx.strokeEllipse( 左上座標x、左上座標y、右下座標x、右下座標y );

座標を指定し、楕円の線画を描画。

ctx.fillEllipse( 左上座標x、左上座標y、右下座標x、右下座標y );

座標を指定し、楕円の塗りつぶしを描画。

ctx.drawEllipse( 左上座標x、左上座標y、右下座標x、右下座標y );

座標を指定し、楕円を描画。コンテキストの設定に従い、塗り、線ともに描画する


メモ

test: http://jsdo.it/ethertank/2w02

多角形

とりあえずどのメソッドも上からに固定。 引数に指定する座標は中心座標。開始地点か、図形を包む画面に平行な長方形の左上でもいいかも。 途中で止めて変な多角形が作れるってのもできてもいいかも。いや要らんかも。 fill と stroke を両方やるのもあるけど、中身殆ど一緒だからアレした方がいい。 引数名、変数名、関数名がちょっと。 「一角形~二角形作れ」って言われたら代わりにう○こを表示。 多角形をアニメーションで回したいとかの時は、直接描画メソッド 3 種よりも getPolygonPoint で得た座標入り配列を別関数で加工しながら使うとかの方が毎回多角形作るより多分効率がいいと思う。もしくはコンテキストを回すか。そういうメソッドまでここに足すととっ散らかるし、冗長な気がする。 getPolygonPoints() でサイズの違う多角形座標配列を二つ作ってアレすれば星型とかもできる。 じゃあ一筆書きの星も…となるが、頂点が偶数の時に二筆書きに処理を変える事も考えないといけない(大きくなってしまう)。

全般

型チェックとかまったくしてない。 来世でやる。

  • CanvasRenderingContext2D.prototype
  • CanvasRenderingContext2D.prototype

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

ethertank

Author

  • Twitter
  • Github

prototype を拡張したいお年頃

個人的に今、SVGがアツい(だいぶ遅い)

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

alvarobyrnealvarobyrne:

canvasRenderingContex2D drawing library