投稿者 tel | 2011年5月6日

CanvasのlineCap

Canvas使ってマウスでお絵かきするようなコードを書いていたらlineCapがなんかよくわからなかったのでメモ。

lineCapの説明については以下のサイトを参照。

http://www.html5.jp/canvas/ref/property/lineCap.html

普通に考えるとroundを指定したら線の両端が丸くなるよ、ってことだと思うがパスの閉じ方によっては丸くなったりならなかったりした。

  • closePathしてからstrokeすると丸くならない
  • closePathしないでstrokeすると丸くなるかもしれない

2番めについてはローカルで試したら両端が丸くなったが、jsdo.itで試したら始点しか丸くならなかった。(Google Chrome 11で検証)

http://jsdo.it/sapphire_al2o3/ba7l

謎は深まる。

追記

closePathした場合は閉曲線になって両端がなくなるからlineCapが意味ないのかもしれない。代わりにlineJoinをroundにしたら丸くなった。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。