如何在html5画布上绘制一个椭圆？ [英] How to draw an oval in html5 canvas?

问题描述

似乎没有一个本机函数来绘制一个椭圆形的形状。

是否可以绘制一个带有2个贝塞尔曲线的椭圆？
有人放过了吗？

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

因此，scale（）更改所有下一个形状的缩放。
Save（）保存之前的设置，并且还原用于恢复设置以绘制新的形状而不缩放。

感谢Jani

  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（）; 
  

解决方案

更新 p>

• 缩放方法可以影响笔触宽度外观


• 缩放方法可以保持笔触宽度完整


• canvas具有椭圆方法，Chrome现在支持


• 向JSBin添加了更新的测试

JSBin测试示例（已更新以测试其他人的答案进行比较）

• Bezier - 基于左上角包含直线和宽度/高度绘制


• Bezier with Center - 中心和宽度/高度


• 弧度和缩放 - 基于绘制圆和缩放绘制
  
  
  
  
  • 请参阅 Deven Kalra的答案
  
  


• 二次曲线 - 绘图
  
  
  
  
  • 测试看起来不太一样，可能是实现
  
  
  • 请参阅 oyophant's 答案
  
  


• 画布椭圆 - 使用W3C标准椭圆（）方法
  
  
  
  
  • 测试看起来不太一样，可能是实现
  
  
  • 请参阅 Loktar's 答案
  
  

原始：

如果你想要一个对称的椭圆，你可以创建一个半径宽度的圆，到你想要的高度（编辑：注意这将影响笔触宽度外观 - 请参阅acdameli的答案），但如果你想完全控制椭圆这里是一种使用贝塞尔曲线。

 < canvas id =thecanvaswidth =400height =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 ，//控制点偏移水平
 oy =（h / 2）* kappa，//控制点偏移垂直
 xe = x + w，// x-end 
 ye = y + h，// y-end 
 xm = x + w / 2，// x-middle 
 ym = y + h / // 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（）; //未正确使用，请参阅注释（用于关闭打开路径）
 ctx.stroke（）; 
} 
 
< / script> 
  

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.

Solution

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.

Thanks to Jani

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

解决方案

updates:

• scaling method can affect stroke width appearance
• scaling method done right can keep stroke width intact
• canvas has ellipse method that Chrome now supports
• added updated tests to JSBin

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

• Bezier - draw based on top left containing rect and width/height
• Bezier with Center - draw based on center and width/height
• Arcs and Scaling - draw based on drawing circle and scaling
  • see Deven Kalra's answer
• Quadratic Curves - draw with quadratics
  • test appears to not draw quite the same, may be implementation
  • see oyophant's answer
• Canvas Ellipse - using W3C standard ellipse() method
  • test appears to not draw quite the same, may be implementation
  • see Loktar's answer

Original:

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