html - 長方形のhtml5キャンバスストレッチサイド

Question

下図のように長方形の辺を伸ばして、中心から伸ばすことで、長方形の形を直線から円弧などに変えることができますか？

Answer 1

アークはあなたにアークを与えるだけなので、他の誰かが提案したようにアークを使用したくないでしょう。より良いアプローチは、長方形（4辺）を4つの立方体のベジエとして表すことです。始点と終点と同一線上にある制御点を持つ3次ベジェは直線を生成するため、通常の長方形を表すことができます。次に、辺を曲線に引き伸ばす場合は、必要な曲線に応じて、コントロールポイントを上、中、上、または下に移動するだけです。ベジエをすばやく理解することはおそらく有益でしょう。

これをわかりやすく説明するために写真を作成し、数分で含めます。

したがって、長方形を描画すると、コードは次のようになります。

ctx.moveTo(p1.x,p1.y);
ctx.bezierCurveTo(cp1.x,cp1.y,cp2.x,cp2.y,p2.x,p2.y);
ctx.bezierCurveTo(cp3.x,cp3.y,cp4.x,cp4.y,p3.x,p3.y);
ctx.bezierCurveTo(cp5.x,cp5.y,cp6.x,cp6.y,p4.x,p4.y);
ctx.bezierCurveTo(cp7.x,cp7.y,cp8.x,cp8.y,p1.x,p1.y);

Answer 2

長方形を描くだけではこれを達成することはできません。ただし、3本の線を描画し、4番目の辺に円弧を描画することはできます。これがのチュートリアルですcontext.arc()。

Answer 3

quadraticCurveTo関数を使用できます。4つのパラメーターがあり、非常に使いやすいです。次の例を参照してください。

http://jsfiddle.net/55Ws3/

<canvas width="800" height="800" id="world" style="border: 1px solid red;"><p class="noCanvas">You need a <a href="#">modern browser</a> to view this.</p></canvas>


var canvasElement = document.getElementById('world');
// Always check for properties and methods, to make sure your code doesn't break 
// in other browsers.
if (canvasElement && canvasElement.getContext) {
    // Get the 2d canvasContext.
    // Remember: you can only initialize one canvasContext per element.
    var canvasContext = canvasElement.getContext('2d');
    if (canvasContext) {
        canvasContext.beginPath();
        canvasContext.moveTo(100, 200);
        canvasContext.lineTo(200, 200);
        canvasContext.quadraticCurveTo(325, 250, 200, 300);
        canvasContext.lineTo(100, 300);
        canvasContext.lineTo(100, 200);
        canvasContext.fillStyle = 'red';
        canvasContext.strokeStyle = 'red';
        canvasContext.lineWidth = 2;
        canvasContext.fill();
        canvasContext.stroke();
        canvasContext.closePath();
    }
}