Bakmıyor oval bir şekil çizmek için yerel bir işlevi var gibi görünüyor. Ayrıca yumurta şekli arıyorum.

2 bezier eğrileri ile bir oval çizmek mümkün mü? Biri ile expierenced?

Amacım gözlerini çizelim ve aslında sadece kullanarak yay ım. Şimdiden teşekkürler.

Çözüm

Yani ölçek() bir sonraki şekil için.Ölçekleme değişiklikleri () Kaydetmeden önce ayarları kaydeder ve ayarları yeni şekiller çizmek için geri geri Ölçekleme olmadan.

Jani için teşekkürler

ctx.save();
ctx.scale(0.75, 1);
ctx.beginPath();
ctx.arc(20, 21, 10, 0, Math.PI*2, false);
ctx.stroke();
ctx.closePath();
ctx.restore();

güncellemeler:

• Ölçekleme yöntemi kontur genişliği görünümünü etkileyebilir
• Ölçekleme yöntemi bitti sağ vuruş genişliği bozulmadan kalabilir
• tuval Chrome artık destekleyen elips yöntemi vardır
• güncelleme testleri eklendi JSBin

4* *(karşılaştırma için diğer cevapları test için güncellendi)

• Bezier - üst rect ve genişlik/yükseklik içeren sol çizin
• Merkez çizin merkezi ve genişlik/yükseklik dayalı Bezier
• Kemerler ve Ölçekleme - daire ve ölçekleme tabanlı çizim üzerine çizmek
  • Deven Kalra's cevap bakın
• İkinci derece Eğrileri - ikinci dereceden denklemleri çözmek çekecek
  • test eskisi gibi çekmemeye görünür, uygulama olabilir
  • oyophant's cevap bakın
• Canvas Elips - W3C standart elips kullanarak() yöntemi
  • test eskisi gibi çekmemeye görünür, uygulama olabilir
  • Loktar's cevap bakın

Özgün:

Eğer her zaman yarıçap genişliği olan bir çember oluşturun ve istediğiniz yüksekliğe ölçek daha sonra simetrik oval (eğer istiyorsanızdüzenleme:bu vuruş etkileyecek fark görünüm - acdameli cevap) genişliği, ama eğer elips üzerinde tam kontrol istiyorsanız, burada bezier eğrileri.

<canvas id="thecanvas" width="400" height="400"></canvas>

<script>
var canvas = document.getElementById('thecanvas');

if(canvas.getContext) 
{
  var ctx = canvas.getContext('2d');
  drawEllipse(ctx, 10, 10, 100, 60);
  drawEllipseByCenter(ctx, 60,40,20,10);
}

function drawEllipseByCenter(ctx, cx, cy, w, h) {
  drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h);
}

function drawEllipse(ctx, x, y, w, h) {
  var kappa = .5522848,
      ox = (w / 2) * kappa, // control point offset horizontal
      oy = (h / 2) * kappa, // control point offset vertical
      xe = x   w,           // x-end
      ye = y   h,           // y-end
      xm = x   w / 2,       // x-middle
      ym = y   h / 2;       // y-middle

  ctx.beginPath();
  ctx.moveTo(x, ym);
  ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
  ctx.bezierCurveTo(xm   ox, y, xe, ym - oy, xe, ym);
  ctx.bezierCurveTo(xe, ym   oy, xm   ox, ye, xm, ye);
  ctx.bezierCurveTo(xm - ox, ye, x, ym   oy, x, ym);
  //ctx.closePath(); // not used correctly, see comments (use to close off open path)
  ctx.stroke();
}

</script>