7

キャンバスの関数で円弧を描くことができることはわかっていarcますが、その円弧のサイズを大きくすると、開始点と終了点の x、y ポイントが変わります。そこで、始点と終点を固定したままサイズを大きくしながら、別の方法で円弧を描くことができないかと考えていました。

編集
以下は、私が探しているものを示す画像です。最初の画像は長方形を示しています。側面を伸ばすと円に変わります(画像2枚目)。さらにサイドを伸ばすと大きな円に変化。すべての画像で、円の端点が長方形の角に結合されていることがわかります。これが私がやりたいことです。

ここに画像の説明を入力
1枚目の画像

ここに画像の説明を入力
2枚目の画像

ここに画像の説明を入力
3枚目の画像

または、このビデオを見て、私が何をしようとしているのかを理解することもできます。


私がしたこと
これfiddleは私の仕事の結果を示しています。
四角形を描くには、マウスをクリックしてドラッグします。

Here is the code

4

2 に答える 2

4

私はあなたがこのようなものを探していると信じています：

draw(0);
$('#range').on('change', function(){
    range = parseInt($(this).val());
    draw(range)
})

function draw(val){
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d'),
    x = 100,
    y = 50,
    d;
    context.clearRect(0, 0, canvas.width, canvas.height);

    d = Math.sqrt(Math.pow(val,2) + Math.pow(50,2));

    context.beginPath();
    context.lineWidth = 1;

    context.arc(x,y+val,d,0,2*Math.PI);

    // line color
    context.strokeStyle = 'black';
    context.stroke();

    // Cut off the top of the circle.
    context.clearRect(0, 0, canvas.width, y);

    // This stuff's just to show some dots
    context.fillStyle = 'red';
    context.fillRect(x-1,y-1,2,2); // Middle
    context.fillRect(x-52,y-2,4,4);//Target point 1
    context.fillRect(x+48,y-2,4,4);// Target point 2

    context.fillRect(x-2,y+d+val-2,4,4); // Point on circle
    context.fillStyle = 'black';
}

作業サンプル

これにはいくつかの欠点があります。これは、円が非表示のセクション（スライダーがサイズを制御している）で指数関数的に大きくなるため、円に近づくほど「遅く」なり、対角線では機能しないことです。今のように。

それ以外は、期待通りに動作します。

于 2013-01-22T12:50:25.717 に答える
2

これを確認してください：http://jsfiddle.net/KZBzq/4/

bezierCurveToで回答を更新

HTML

<label>Range :</label>
<input type="range" name="points" value="0" min="0" step="1" max="100" id="range"> 
<canvas id="myCanvas" width="578" height="250"></canvas>

JS

draw(100); 

$('#range').on('change', function(){
  range = parseInt($(this).val());
  draw(100-range)
})

function draw(val){

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d'),
  x = 100,
  y = 100,
  cp1x = x/2,
  cp2x = y/2,
  cp1y = val,
  cp2y = val;
  context.clearRect(0, 0, canvas.width, canvas.height);

  context.beginPath();
  context.lineWidth = 1;

  context.moveTo(25 , x);
  context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

    // line color
    context.strokeStyle = 'black';
    context.stroke();

}

現在、x と Y は固定されています。これはあなたの要件でしたか？

于 2013-01-22T07:28:15.380 に答える