如何在html5画布中绘制椭圆形? [英] How to draw an oval in html5 canvas?

问题描述

似乎没有绘制椭圆形形状的本机函数.我也不是在寻找蛋形.

There doesnt seem to be a native function to draw an oval-like shape. Also i am not looking for the egg-shape.

是否可以用两条贝塞尔曲线绘制一个椭圆?有人经历过吗?

Is it possible to draw an oval with 2 bezier curves? Somebody expierenced with that?

我的目的是画一些眼睛，实际上我只是使用弧线.提前致谢.

My purpose is to draw some eyes and actually im just using arcs. Thanks in advance.

解决方案

所以 scale() 改变了所有下一个形状的缩放比例.Save() 保存之前的设置，restore 用于恢复设置以绘制新的形状而无需缩放.

So scale() changes the scaling for all next shapes. Save() saves the settings before and restore is used to restore the settings to draw new shapes without scaling.

感谢贾尼

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();

推荐答案

更新:

• 缩放方法会影响笔画宽度的外观
• 正确的缩放方法可以保持笔触宽度不变
• canvas 具有 Chrome 现在支持的椭圆方法
• 向 JSBin 添加了更新的测试

JSBin 测试示例(更新以测试其他人的答案以进行比较)

JSBin Testing Example (updated to test other's answers for comparison)

• Bezier - 基于包含矩形和宽度/高度的左上角绘制
• 带中心的贝塞尔曲线 - 基于中心和宽度/高度绘制
• 圆弧和缩放 - 基于绘制圆和缩放比例绘制
  • 参见Deven Kalra 的回答
  • 测试似乎不太一样，可能是实现
  • 参见oyophant 的回答
  • 测试似乎不太一样，可能是实现
  • 参见Loktar 的回答

  原文:

  如果你想要一个对称的椭圆，你总是可以创建一个半径宽度的圆，然后将它缩放到你想要的高度(注意这会影响笔画宽度的外观 - 请参阅acdameli的答案)，但如果你想完全控制椭圆，这里有一种使用贝塞尔曲线的方法.

  If you want a symmetrical oval you could always create a circle of radius width, and then scale it to the height you want (edit: notice this will affect stroke width appearance - see acdameli's answer), but if you want full control of the ellipse here's one way using bezier curves.

  <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>
  

  这篇关于如何在html5画布中绘制椭圆形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！