月別: 2013年1月

クリッピング処理

クリッピング処理
クリッピング処理は画像の一部を切り抜いて表示すること
今回はクリッピング領域へ四角形描画
まず
でクリッピング領域を指定するパスを生成
パス生成はどのcanvasでもおなじ
context.beginPath();
でパス生成し
context.arc(430,250,90,0,Math.PI,false);
でパス構築
context.clip()
で
パスがクリッピング領域として設定され
その中へのみ画像や図形が描画される
今回は
strokeRect()で
クリッピング領域内へ四角形描画してる
ソースが
context.strokeRect(310,200,200,100);
ちなみに、引数は
310, 開始のx座標
200, 開始のY座標
200, 横幅
100 縦幅
となる
クリッピングの解除には
save()
restore()
を使う
save()はcanvasの状態を保存し
restore()はsave()で保存した状態を復元
つまり、
save()でクリッピング前を保存して
処理が終わってから
restore()で戻す
save()は何回も保存できる
save()はスタック式なので
最後に保存した状態が取り出される
仮想マシンのスナップショットのようなかんじ

ペジェ曲線の描画

ペジェ曲線の描画
曲線にはいくつか種類があり
放物線、スプライン曲線、双曲線などもある
Canvas Context 2D API で定義されているのは
ペジェ曲線になる
さらに
ペジェ曲線には
2次ペジェ曲線と3次ペジェ曲線があり
2次ペジェ曲線は
始点、制御点、終点
の座標をもとに曲線を描く
まず
moveTo(始点の座標)
として
quadraticCurveTo(制御点 , 終点)
というかんじ
3次ペジェ曲線は
始点
始点側の制御点
終点側の制御点
終点
の4つ
こちらは
moveTo(始点の座標)
で
bezierCurveTo(始点側の制御点 , 終点側の制御点 , 終点)
線の色は
strokeStyle=”描く色”;
で設定
beginPath()でパスを生成
moveTo()とbezierCurveTo()で座標を決めて
最後に
stroke()で実際に描くという流れ

wordpress パフォーマンスチェック

wordpress のパフォーマンスをチェックするため
Firefox のアドオン
Firebug を使います
Firebug はCOM、CMSの調査
パフォーマンス測定もできるので
かなり便利です
インストールは
Firefox を起動して
ツール > アドオン
アドオンを検索のところへ
firebug
と入力すればでてくるので、これをインストールします

FXで集中すべき時間

ひさしぶりに、FX関連のことを書き込んでみました
FXは株式市場と異なり夜間でも取引可能です
理由は、世界中の市場が動いているからです
ただ、ずっと動いているからといってやりつづけることはできませんし
精神衛生上よくありません
なにより、仕事をしながらやるのであれば
ある程度の時間に絞ってのみやることをおすすめします
この時間帯については
ＦＸのポイントとなる時間帯
や
ＦＸトレーダー要注目の時間帯！！「仲値算定」「ロンドンフィキシング」「ＮＹオプションカット」
に
掲載されているように主要な時間のみに絞ったほうが
効率はよくなります
私の場合、夜9時~11時ぐらいまでですし
そこまで集中できないので、やらないという日もあります
ちなみに、株式市場も活気づく時間帯があり
朝9時の開始から約30分程度が一番値動きがあります
株式でもFXでもある程度勉強しておかないと損失を抑えたり
利益をだすことはできません
クロス円の仕組みや、季節要因による資金還流の流れ
IMMポジションのバランスなども考えたりすると損失を減らすことができます
一時期、スワップ金利が話題となりましたが
私はおすすめしません
レバレッジをかけたまま放置することは非常に危険です
とくに通貨がクロス円の場合、値幅は大きいため
金利以上の為替差損が生じます
数年前、ポンド円は２５０円でしたが、現在は半分程度です
金利がいくら１５％あっても、マイナス５０％ですし
現在、金利は減っていて３％程度です
しかも、この金利は元本に対してではないので
大幅な損失になります
FXで大金を… ということを考える場合、
一度、バーチャルトレードで練習することをおすすめします
取引時間の値動きなども本物の市場と連動しているので
勝てるというならば、この練習でも勝てるはずです
過去、ランキングに入った人は資金を30倍にした人もいます
ただ、そこまで練習してたどりついてから本番でもおそくはないはずです
練習資金は仮想資金で５００万円ありますので
この資金を億まで増やせるようになったら
実際に取引してみてはいかがでしょうか？
現実に５００万円失うと取り戻すのは大変です
しかし、練習でいろいろと学んでから行えば
そういったことは回避できますし、その間資金を貯めることもできます
ちなみに、バーチャルトレードは
http://www.virtualfx.jp/
となります
一位の方には賞金30万円でますので
一位をとってから実際に取引してもよいかもしれません

canvasによる円弧の描画

円弧の描画
円弧もbeginPath()で新規にパスを指定し
arc()を呼び出す
arc()には6つのパラメータが必要で
左から解説すると
中心X座標
中心Y座標
半径
開始角度
終了角度
反時計まわりにするか判別するプラグ
となる
注意点は
開始角度と終了角度は
45度とか135度とかみたいに
度=degreeではないということ
指定するとにきはラジアンで指定する
ラジアンは
180度でπ
360度なら2π
となる
Javascriptなら
πは
Math.PI
というように指定できる
もし、終了角度をMath.PIにすると
半円になる
この円を描く向きを決めるのが
arc()のパラメータのフラグ
これがtrueなら時計まわり
falseなら反時計まわりとなる
つまり、フラグがtrueなら
上の半円となる

canvasで三角形描画

canvasで三角形描画
三角形は始点と終点がおなじになるので
closePath()を使えば、
最後に描画した座標と開始点を直線で結べる
closePath()は
パスを閉じるためのメソッド
beginPath()で生成されたパスは
closePath()でひとまとめにされる
三角形ときにclosePath()
直線もclosePath()
なのは
パスには2種類あり
オープンパス
クローズパス
がある
オープンパスは
パスの始点と終点が結ばれていない
クローズパスは始点と終点が結ばれた状態
となる

四角形描画メソッドについて

四角形描画メソッドについて
rect()
fillrect()
strokeRect()
clearRect()
いずれもパラメータは同じ
左から順番に
x座標
y座標
横幅
縦幅
となる
strokeRect()は
四角形の枠だけ描画
fillRect()は
塗りつぶした四角形を描画する
まず、塗りつぶした四角形から
これはfillRect()を使う
まず最初に塗りつぶす色を決める
やり方は
コンテキストのfillStyleプロパティへ
カラー名やカラーコードを指定
ソースにす？と
context.fillStyle=”black”;
色が決まったら
fillRect()で四角形描画
全体を塗りつぶしたいなら
描画開始座標は
0,0
横幅は canvasObj.width
縦幅は canvasObj.height
これでok
ソースにすると
context.fillRect(0,0,canvasObj.width,canvasObj.height);
次は枠だけの四角形描画
これにはstrokeRect()を使う
fillRect()は塗りつぶす色だけど
strokeRect()は枠の色を決める
まぁ色を先に決めるのは変わらん
で、線の色の指定は
コンテキストのstrokeStyleプロパティへ
カラー名やカラーコードを指定
あと、枠なので、線の太さを指定する
これは
lineWidthで指定
ソースにすると
context.lineWidth=10;
単位はピクセル限定
ちなみに、細かく小数点で指定もできる
あとは
strokeRect()で描画する
引数は左から
開始のx,y座標と
横幅
縦幅　
となる