二本の直線と円弧の接線を描く方法

必須ctx.arcTo（）、2つのパラメータは、例えば、次の例のような制御点の座標です。 

<！DOCTYPE HTML > 
< HTML のlang = "EN" > 

< ヘッド> 
    < メタのcharset = "UTF-8" > 
    < タイトル>ドキュメント</ タイトル> 
</ ヘッド> 

< ボディ> 
    < キャンバスID = "canv" 幅= "300 " 高さ=" 300" > </ キャンバス> 
    < スクリプト>
        ' Canv ' ）;
             IF （！Canvas.getContext）リターン;
             VAR CTX = canvas.getContext（" 2D " ）; 
            ctx.beginPath（）; 
            ctx.moveTo（50 、50 ）;
             // パラメータ2：コントロールポイント制御点2つの4パラメータの座標：1 3,4-パラメータ座標円弧半径
            ctx.arcToを（200であり、50 、200は、200であり、140 ）; 
            ctx.lineTo（200であり、200は）
            ctx.stroke（）; 

            // 绘制控制点
            ctx.beginPath（）; 
            ctx.rect（50 、50 、5 、5 ）。
            ctx.rect（200 、50 、5 、5 ）
            ctx.rect（200 、200 、5 、5 ）
            ctx.fill（）; 
        } 
        ）（描きます。
    </ スクリプト> 
</ ボディ> 

</ HTML >

 

 

注意： 

1. ctx.arcToは（）は、2本の直線と円弧を描くことができます。

2. ctx.rect（）は、閉じた長方形を描くことができます。 

関数draw（）{ 
    VARキャンバス=のdocument.getElementById（ 'canv'）。
    （！canvas.getContext）であればリターン。
    VaRのCTX = canvas.getContext（ "2D"）。
    ctx.beginPath（）; 
    ctx.rect（100、100、100、50）。
    ctx.stroke（）; 
} 
）（描きます。