JavaScriptはじめました。

JavaScriptはじめた初心者が日々精進するブログ。

Chromeのfont-size

Chromeでfont-sizeを10px未満に指定しても大きさは10pxになってしまうという問題があります。Chrome自体の設定を変えなくてはならなかったりでユーザーの設定に依存してしまいます。
ので、9px未満のQ数になるようにテストしてみます。

【結果はこんな感じ】

できました!
font-size:10pxの文字に「-webkit-transform: scale(数字);」でスケールを小さくし、「-webkit-transform-origin:数字 数字;」でスケール変更基準点を指定してあげるだけで問題なくいきました。

例えば「text-align:center;」で6pxの文字の場合

-webkit-transform: scale(0.6);
-webkit-transform-origin:50% 0;

「text-align:left;」で6pxの文字の場合

-webkit-transform: scale(0.6);
-webkit-transform-origin:0 0;

「text-align:right;」で6pxの文字の場合

-webkit-transform: scale(0.6);
-webkit-transform-origin:100% 0;

と設定してあげれば問題なく、6pxのQ数に設定することができます。

秒数から日時を割り出す。

◯◯◯◯秒は、何日何時間何分何秒?な計算いつも忘れるのでメモ。

var num = 「秒数」;

var day    =  Math.floor(num / (24 * 60 * 60));
var hour   =  Math.floor(num / (60 * 60));
var minute =  Math.floor(num / 60) % 60;
var second =  num % 60;

くねくねする円を作ってみた。

f:id:kkkkkkko:20150218190721p:plain

【DEMO : こちらをクリック】

線になった時にわかると思いますが、arcで円を書いているのではなく10箇所のポイントを2次ベジェで描画している所がポイントです。

では、まずポイントを配置し、線で繋ぐようにします。

f:id:kkkkkkko:20150218191150p:plain

【DEMO : こちらをクリック】

ここは各点を単純に

cos = Math.cos(角度) * 半径 + 基準点(センター位置X)
sin = Math.sin(角度) * 半径 + 基準値(センター位置Y)

で、レイアウトできます。

28行目からの

var cos = Math.cos(this.radian) * this.radius;
var sin = Math.sin(this.radian) * this.radius;

this.x = cos + this.centerX;
this.y = sin + this.centerY;

ですね。


続いてこの点を上記のポイントを基準に波打つようにします。

f:id:kkkkkkko:20150218191157p:plain

【DEMO : こちらをクリック】

うねうねしてますね。
これは、コサイン波を利用してradianを足したり引いたりしています。

24行の

var plus = Math.cos(this.rota * (Math.PI / 180)) * this.r;

this.radius += plus;

var cos = Math.cos(this.radian) * this.radius;
var sin = Math.sin(this.radian) * this.radius;

this.x = cos + this.centerX;
this.y = sin + this.centerY;

こんな感じですね。

最後にカクカクした線を滑らかにしてみましょう。

先ほどまで線を引くのにlineToを使っていましたが二次ベジェのquadraticCurveToに変更します。
ただこれだけですと、繋ぎ目がカクカクして先ほどのものと変化のない状態になります。

↓↓↓↓↓↓↓↓↓↓ここを↓↓↓↓↓↓↓↓↓↓
for(var i = 0; i < MAX; i++)
{
	if(i == 0)
	{
		ctx.moveTo(point[i].x, point[i].y);
	}else
	{
		ctx.lineTo(point[i].x, point[i].y);
	}
}

↓↓↓↓↓↓↓↓↓↓こんな感じに変換↓↓↓↓↓↓↓↓↓↓

ctx.moveTo(point[0].x, point[0].x);
for(var i = 0; i < MAX - 1; i++)
{
	ctx.quadraticCurveTo(point[i].x, point[i].y, point[i + 1].x, point[i + 1].y);
}
ctx.quadraticCurveTo(point[i].x, point[i].y, point[0].x, point[0].y);

【DEMO : こちらをクリック】

これは2次ベジェのアンカーポイントを作ってないからiの座標とi + 1の座標の平均値を出して値を入れることで解決できます。
ので、以下のように変更します。

var xc = (point[i].x + point[i + 1].x) / 2;
var yc = (point[i].y + point[i + 1].y) / 2;

ctx.quadraticCurveTo(point[i].x, point[i].y, xc, yc);

これでうまく行ったと思います。

【データのダウンロードはこちら】