-4

キャンバスで新しいメニューを作ります。キャンバスを使うのは初めてです。したがって、この種のメニューを開始するためにあなたの助けが必要なことがいくつかあります。ここに画像があります：

ここに画像の説明を入力してください

この不便をおかけして申し訳ありません。私はこの投稿を編集しました、そして唯一の質問は：

n個のフローがある場合（上の図では3つのフロー）、上の図のように描画するために各領域の半径を等しく計算する原理は何ですか？

このようなメニューについての提案やアイデアを教えてください。私は感謝します。あなたの考え、あなたの考えを前もって感謝します！良い一日を過ごしてください ！

4

1 に答える 1

1

確かに上の例の半径は白い線の長さなので、どんな長さでもいいですか？

セクターを等しい弧長のn個のサブセクターに均等に分割する場合は、中心の最大角度を決定する必要があります。上記の例では、90度またはpi/2ラジアンです。

最終的に、最大角度、サブセクターの弧の長さ、サブセクターの角度、および半径はすべて、次の方法で接続されます。

subsector_arc_length = radius * subsector_angle

subsector_angle = max_angle / n

または//subsector_arc_length= radius * max_angle / n（これらにはラジアンが必要であることに注意してください）

しかし、これをキャンバスに描画することが目的の場合は、次のようになります。

var canvas = '<canvas id="canvas" width="500" height="500" style="border: 1px solid black; width: 500px; height: 500px; background: lightblue;"></canvas>'
document.body.innerHTML += canvas;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var max_angle = Math.PI/2; //rad - 90deg
var no_of_flows = 10; 
var radius = 200; //pixels

ctx.lineWidth = 5;
ctx.strokeStyle = '#333';
ctx.translate(250,350);
ctx.beginPath();
ctx.rotate(-Math.PI/2);
ctx.rotate(-Math.PI/2 + max_angle/2);
for (var i=0; i<no_of_flows; i++) {
    ctx.moveTo(0,0);
    ctx.lineTo(0, radius);
    ctx.stroke();
    ctx.rotate(-1*max_angle/(no_of_flows-1));
};

あなたの主な問題は、おそらくキャンバスからより良い画像を生成できるでしょう。+メニューのイベント構造。

于 2012-09-14T08:53:40.817 に答える