canvasの練習

canvasつかってみた。

扇形が開いていく

• http://jsbin.com/uloto3/3

一旦、moveToで円弧の中心に移動するのがコツ。でないとfillで扇型が得られない。

円弧のなかで秒数をカウントする

• http://jsbin.com/uloto3/2

文字を描画するときに、textAlign, textBaselineを設定して文字を真ん中にもってくる。

クリックしたところに丸を書く

• http://jsbin.com/omitu3

canvas要素にonclickのイベントを設定する。現在位置を取得してcanvas内に描画。

マウスの下に丸を書く

• http://jsbin.com/omitu3/2

mousemoveで位置を保存して、setIntervalで描画。

テキストボックスに入力されたURLの画像をImageオブジェクトで読み込んでcanvasに描画

• http://jsbin.com/owufi

drawImageに引数で与えることができるのはimgタグ,canvasタグ, Imageオブジェクト(今回はこれだけ)。一応videoタグもOK(表示中のフレームの画像)。