mozilla

リビジョンの比較

junk

Change Revisions

リビジョン 453509:

リビジョン 453509 (編集者: ethertank / 編集日時: )

リビジョン 453513:

リビジョン 453513 (編集者: ethertank / 編集日時: )

タイトル:
Test 4 - 復旧用 (Drawing shapes with canvas / 図形を描く)
Test 4 - 復旧用 (Drawing shapes with canvas / 図形を描く)
URL スラグ:
User:ethertank/Test_4
User:ethertank/Test_4
内容:

リビジョン 453509
リビジョン 453513
n345      <img align="right" src="/web/20130624131209im_/https://deven345      <img src="https://mdn.mozillademos.org/files/223/Canvas_cur
>loper.mozilla.org/@api/deki/files/76/=Canvas_curves.png" alt="">>ves.png" style="float:right" width="190" height="190" alt="">これらの
 >違いは右の画像を使うことで説明することができます。二次ベジェ曲線は始点と終点(青い点)を持ち、三次ベジェ曲線が 2 つの制御点を持
 >つのに対して <i>制御点</i> (赤い点)を 1 つだけ持ちます。
346    </p>
347    <p>346    </p>
348      これらの違いは右の画像を使うことで説明することができます。二次ベジェ曲線は始点と終点(青い点)を持ち、三次ベジェ曲線が
>二つの制御点を持つのに対して <i>制御点</i> (赤い点)を一つだけ持ちます。 
349    </p>347    <p>
350    <p>
351      それらのメソッドの両方の <code>x</code> と <code>y</code> パラメタは終点の座標です。<348      それらのメソッドの両方の <code>x</code> と <code>y</code> パラメタは終点の座標です。
>code>cp1x</code> と <code>cp1y</code> は最初の制御点、 <code>cp2x</code> と><code>cp1x</code> と <code>cp1y</code> は最初の制御点、 <code>cp2x</code> 
> <code>cp2y</code> は番目の制御点の座標です。>と <code>cp2y</code> は 2 番目の制御点の座標です。
n359    <h4 id="Quadratic_Bezier_curves" name="Quadratic_Bezier_curven356    <h4 id="Quadratic_Bezier_curves">
>s"> 
360      <code>quadraticCurveTo</code>357      Quadratic Bezier curves
n363      <a href="/web/20130624131209/http://developer.mozilla.org/sn360      この例では、吹き出しをレンダリングするために複数の二次ベジェ曲線を使用しています。
>amples/canvas-tutorial/2_5_canvas_quadraticcurveto.html">この例を見る</ 
>a> 
364    </p>
365    <p>361    </p>
366      <img align="right" src="/web/20130624131209im_/https://deve362    <div class="hidden">
>loper.mozilla.org/@api/deki/files/94/=Canvas_quadratic.png" alt=" 
>"> 
363      <pre class="brush: html" name="code">
364&lt;html&gt;
365 &lt;body onload="draw();"&gt;
366   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas
 >&gt;
367 &lt;/body&gt;
368&lt;/html&gt;
369</pre>
367    </p>370    </div>
368    <pre class="brush:js">371    <pre class="brush: js" name="code">
372function draw() {
373  var canvas = document.getElementById('canvas');
374 
375  if (canvas.getContext) {
376    var ctx = canvas.getContext('2d');
377 
369// 二次曲線の例378    // 二次曲線の例
370ctx.beginPath();379    ctx.beginPath();
371ctx.moveTo(75,25);380    ctx.moveTo(75, 25);
372ctx.quadraticCurveTo(25,25,25,62.5);381    ctx.quadraticCurveTo(25, 25,  25, 62.5);
373ctx.quadraticCurveTo(25,100,50,100);382    ctx.quadraticCurveTo(25, 100, 50, 100);
374ctx.quadraticCurveTo(50,120,30,125);383    ctx.quadraticCurveTo(50, 120, 30, 125);
375ctx.quadraticCurveTo(60,120,65,100);384    ctx.quadraticCurveTo(60, 120, 65, 100);
376ctx.quadraticCurveTo(125,100,125,62.5);385    ctx.quadraticCurveTo(125, 100, 125, 62.5);
377ctx.quadraticCurveTo(125,25,75,25);386    ctx.quadraticCurveTo(125, 25, 75, 25);
378ctx.stroke();387    ctx.stroke();
388  }
389}
t380    <p>t391    <div>
381      ただ一つの二次ベジェ制御点から両方の三次ベジェ制御点を正しく計算することによってどんな二次ベジェ曲線でも三次ベジェ曲線392      {{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "htt
>に変換するのは可能です、逆は真ではありませんが。二次のベジェ曲線への三次ベジェ曲線の正確な変換は三次の用語が 0 のときのみ可能で>ps://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}
>す。より一般には複数の二次ベジェ曲線を使って三次ベジェ曲線を近似するために下位区分方法が使われます。 
382    </p>393    </div>

前に戻る