2012年10月 / 09月≪ 12345678910111213141516171819202122232425262728293031≫11月

インフォメーション

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↑

2012.10.06 (Sat)

なんとなく現状の仕事環境とかメモ

webページ作成(html,css)
javascript
php
eclipse3.7 indigo
秀丸
firefox+firedebug

画像とかアイコンとかボタンとか作成、デザイン切り取り
gimp
inkscape

ファイルの差異確認。diff。
rekisa

sshとか
teratermpro

テキスト内検索
JGREP2

ftp
ffftp

sftp
winSCP

C#.NET
visual studio express

android
eclipse3.7 indigo(android用に別インストール)

office系
microsoft office homeandbusiness

書き出してみるとほぼ無料でやってるんだなあと実感。
さすがにoffice系はopenofficeはきつかった。
そしてoffice系は一番使わねーと思ってたonenoteを一番使っているという。
仕事先別、プロジェクト別、サーバー情報、TODOなどザクザクっとわけて保存できるのが肌にあってた。
今まではフォルダわけして.txtを置いてた感じだがそれがまとまって使いやすく把握しやすくなった。
skydriveでいざって時(ノートPC修理に出したときとか)見れるし助かる。


 |  03:52  |  パソコン  |  トラックバック(0)  |  コメント(0)  |  Top↑
 | BLOGTOP | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。