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;
くねくねする円を作ってみた。
線になった時にわかると思いますが、arcで円を書いているのではなく10箇所のポイントを2次ベジェで描画している所がポイントです。
では、まずポイントを配置し、線で繋ぐようにします。
ここは各点を単純に
cos = Math.cos(角度) * 半径 + 基準点(センター位置X) sin = Math.sin(角度) * 半径 + 基準値(センター位置Y)
で、レイアウトできます。
２８行目からの
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;
ですね。
続いてこの点を上記のポイントを基準に波打つようにします。
うねうねしてますね。
これは、コサイン波を利用してradianを足したり引いたりしています。
２４行の
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);これは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);
これでうまく行ったと思います。
