mozilla

リビジョンの比較

junk

Change Revisions

リビジョン 453513:

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

リビジョン 453515:

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

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

リビジョン 453513
リビジョン 453515
n357      Quadratic Bezier curvesn357      二次ベジェ曲線
n395      <code>bezierCurveTo</code> の例n395      三次ベジェ曲線
n398      <a href="/web/20130624131209/http://developer.mozilla.org/sn398      この例では、三次ベジェ曲線を使ってハートを描画します。
>amples/canvas-tutorial/2_6_canvas_beziercurveto.html">この例を見る</a> 
399    </p>
400    <p>399    </p>
401      <img align="right" src="/web/20130624131209im_/https://deve400    <div class="hidden">
>loper.mozilla.org/@api/deki/files/59/=Canvas_bezier.png" alt=""> 
401      <pre class="brush: html" name="code">
402&lt;html&gt;
403 &lt;body onload="draw();"&gt;
404   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas
 >&gt;
405 &lt;/body&gt;
406&lt;/html&gt;
407</pre>
402    </p>408    </div>
403    <pre class="brush:js">409    <pre class="brush: js" name="code">
404// ベジェ曲線の例410function draw() {
411  var canvas = document.getElementById('canvas');
412  if (canvas.getContext){
413 
414    var ctx = canvas.getContext('2d');
415 
416    // Quadratric curves example
405ctx.beginPath();417    ctx.beginPath();
406ctx.moveTo(75,40);418    ctx.moveTo(75,40);
407ctx.bezierCurveTo(75,37,70,25,50,25);419    ctx.bezierCurveTo(75,37,70,25,50,25);
408ctx.bezierCurveTo(20,25,20,62.5,20,62.5);420    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
409ctx.bezierCurveTo(20,80,40,102,75,120);421    ctx.bezierCurveTo(20,80,40,102,75,120);
410ctx.bezierCurveTo(110,102,130,80,130,62.5);422    ctx.bezierCurveTo(110,102,130,80,130,62.5);
411ctx.bezierCurveTo(130,62.5,130,25,100,25);423    ctx.bezierCurveTo(130,62.5,130,25,100,25);
412ctx.bezierCurveTo(85,25,75,37,75,40);424    ctx.bezierCurveTo(85,25,75,37,75,40);
413ctx.fill();425    ctx.fill();
426  }
427}
tt429    <div>
430      {{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https:/
 >/mdn.mozillademos.org/files/207/Canvas_bezier.png")}}
431    </div>

前に戻る