html5 キャンバス描画 graphics_html/css_WEB-ITnose

誰か良い描画例を持っていますか? どのような形でも構いません。最も重要なものは三角形、五芒星、泡などです。

ディスカッションへの返信 (解決策)

点
線
ベジェ曲線

あなたが言及したグラフィックスを描画するための Canvas API、問題があると思いますか?

五芒星の描き方の例を教えてください。

インターネットで見つけた多くの例は、すべて回転、つまり翻訳です。

今、私は基本的なものだけが欲しいです。

点
線
ベッセル曲線

あなたが言及したグラフィックスを描画するための Canvas API、問題があると思いますか?

泡を描く例はありますか?

泡の作り方はもう知っています。今では五芒星もあります。

描画に非常に便利な kenitic.js ファイルをダウンロードします。彼は多くのものをカプセル化しており、jquery と同じように使用できます。以下に非常に優れた Web サイトがあります。この Web サイトは海外のもので、開くのが少し遅いです。 -tutorial/

kenitic.js ファイルをダウンロードします。これは描画に非常に便利です。彼は多くのものをカプセル化しており、jquery と同じように使用できます。以下に非常に優れた Web サイトがあります。この Web サイトは海外のもので、開くのが少し遅いです。 -tutorial/

ここの五芒星は 線が真っ直ぐではありません。もしそうなら、ごく普通の五芒星です。

最初の方法
五芒星の中心点として座標を定義します

五芒星の各辺の長さの半分として長さを定義します
座標セット (五芒星の終点セット) を定義します尖った星)
5回ループ
毎回 中心点からプラス90度方向に回転させた半径長さ180/5*(現在のサイクル数)の座標点を求める

このようにして、5つの座標点は取得した

五芒星の接続ルールに従って座標点を循環させ、線を描画します


2 番目の方法はより簡単です
手で五芒星を描く方法をシミュレートします

特定の座標から開始し、指定した長さの線分を指定した角度で​​描画します
線分の端の座標点で角度を135度回転して描画を続けます
5回で終了します


泡の作り方はわかっているので、コードが最新ではありません

最初の方法
五芒星の中心点として座標を定義します

五芒星の各辺の長さの半分として長さを定義します
座標セット (五角形) を定義します星の端点の集合)
5回ループ
毎回、180/5*(現在のループ回数)の正の90度方向に回転させた中心点の半径長さの座標点を取得します

このようにして、5 つの座標点が得られます

ループ座標点 五芒星の接続ルールに従って描画します


2 番目の方法はより簡単です
手動で五芒星を描く方法をシミュレートします

から。 ..
2 番目の方法は良いです。やってみます