読者です 読者をやめる 読者になる 読者になる

canvasの練習

canvasつかってみた。

扇形が開いていく

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

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

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

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

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

マウスの下に丸を書く

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

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

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