くねくねする円を作ってみた。
線になった時にわかると思いますが、arcで円を書いているのではなく10箇所のポイントを2次ベジェで描画している所がポイントです。
では、まずポイントを配置し、線で繋ぐようにします。
ここは各点を単純に
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;
ですね。
続いてこの点を上記のポイントを基準に波打つようにします。
うねうねしてますね。
これは、コサイン波を利用して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);
これは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);
これでうまく行ったと思います。