これは、HTML5キャンバスでの最初の遠足です。私は、jQueryとJavascriptの実用的な知識を持っています。私はそれを使って「回転する地球」効果を作成しようとしています。アイデアは、回転する地球儀の効果を与えるために、円と子午線をその上に「回転」させることです。
円を描きました。今度は、右から始まり（円の曲線に沿って）、真っ直ぐになる中心に向かって（真ん中で真っ直ぐに）線を作成し、その逆の曲率をたどろうとしています。左、円で終わります。
HTML5キャンバスとjQueryを使用してこれを実行しようとしていますが、どこから始めればよいかわかりません...アークを作成してからアニメーション化する必要がありますか？
キャンバスが適切なツールなのか、それとも他のものを使うべきなのか、私も疑問に思っています。
どんな提案でも大歓迎です！
セバスチャン
これは私が得たものであり、これ以上先に進む時間がありませんでした: http://jsfiddle.net/Z6h3Z/
2 つの制御点が、極を中心とする一種の楕円形の弧の中にあるベジエ曲線を使用します。私が行き詰まったのは、よりリアルに見えるように円弧に沿ってポイントを配置することです。
二次ベジエ曲線を使用できます。これは基本的に、開始点、終了点、および中間に「制御点」がある曲線であり、地球が回転するときに変更したいものです。この場合、すべての線は、「地球」の北極と南極でそれぞれ開始および終了します。たとえば、次のいずれかの行を作成するには:
// start drawing a line
canvas.beginPath();
// move the the top of your globe
canvas.moveTo(0,0);
/* draw a curve with the control point specified by the first two args,
* end point by the second two:
* (in your case, the control point would be in the middle of the globe) */
canvas.quadraticCurveTo(control_point_x, control_point_y, 0, 50);
// finish drawing, stroke and end
canvas.stroke();
canvas.closePath();
もちろん、各フレームの後でラインをクリアする方法も考慮する必要があります。