2017年03月 / 01月≪ 12345678910111213141516171819202122232425262728293031≫02月

インフォメーション

FC2ブログで画像等を一括アップロードするソフトを地味に配布してます。
FC2ブログ用ファイルアップロードの最新版はこちら
(ベクター)FC2ブログ用ファイルアップロード

--.--.-- (--)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


 |  --:--  |  スポンサー広告  |  Top↑

2012.10.20 (Sat)

canvasで円をくりっと描くアニメーション

html5のcanvasで円をくりっと描くアニメーションが要りそうなのでやってみた。
http://jsfiddle.net/Ey5W2/

drawボタンで動くはず。
safariだと縦に伸びてIEだとぺちゃんこになったけど。
IEはIE9しか対応してないらしい。

意味とかメモ
■ani()にてまず背景のグレーの円をかく。
ctx.beginPath();
新しいパスかく

ctx.lineWidth = 10;
線の太さは10px

ctx.strokeStyle="#AAA";
色は#AAA

ctx.arc(50,50,20,0,Math.PI*2,false);
中心位置はleft50px,top50px
半径20px,開始角度0、終点角度Math.PI*2(1周)

ctx.stroke();
↑の奴を実際にかく処理

setIntervalでdrawをspanごとに実行

■drowで書く処理
var a = timenow / time;
角度の割合

ctx.lineWidth = 5;
太さ変えた
ctx.strokeStyle="#FFF";
色を白にした

ctx.arc(50,50,20,Math.PI*1.5,Math.PI*2*a + Math.PI*1.5,false);
上から書くために開始角度をMath.PI*1.5にした。
下記のURL先がわかりやすかった。
http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/


円がぐにょるのはcanvasにwidthとheightを指定してなかったからみたい。
ついでに毎フレーム全書き直しした方がやっぱきれいにかけるな。
http://jsfiddle.net/sSYmg/


 |  22:30  |  JavaScript  |  トラックバック(2)  |  コメント(2)  |  Top↑

Comment

はじめまして。

「FC2ブログ用ファイルアップロード1.0.4.2」を使っています。

アニメgif画像が1コマのgifに変換されてしまうのですが、
なにか設定があるのでしょうか。
ご教授ください。
こぅ |  2012.10.31(水) 04:10 |  URL |  【コメント編集】

●Re: タイトルなし

初めまして。コメントありがとうございます。
「Exif情報を削除する」にチェックを入れると1コマgifになっちゃうみたいです。
チェックを外せばgifアニメそのままアップできました。
簡易なexifの削除方法をつかってたので、やっぱりこの辺問題でてきますね。
上野メモ |  2012.10.31(水) 22:14 |  URL |  【コメント編集】

コメントを投稿する

URL
コメント
パス  編集・削除するのに必要
非公開  管理者だけにコメントを表示
 

Trackback

この記事のトラックバックURL

この記事へのトラックバック

まとめ【canvasで円をくりっと】

html5のcanvasで円をくりっと描くアニメーションが要りそうなのでやってみた。http://jsfiddle.net/Ey5W2/
2012/10/25(木) 03:46:36 | まっとめBLOG速報

まとめ【canvasで円をくりっと】

html5のcanvasで円をくりっと描くアニメーションが要りそうなのでやってみた。http://jsfiddle.net/Ey5W2/
2012/10/25(木) 03:46:36 | まっとめBLOG速報
 | BLOGTOP | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。