canvas怎么绘制一个椭圆形

本文讲解"canvas如何绘制一个椭圆形"，用于解决相关问题。

首先我们来看一下canvas自带的绘制椭圆的方法

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)。

参数（从左到右）：

(起点x,起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针)

我们来看canvas自带的绘制椭圆的方法代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>椭圆</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
  当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script>
  window.onload = function(){
      var canvas = document.getElementById("canvas");
      var  ctx=canvas.getContext('2d');
      canvas.width = 800;
      canvas.height = 800;
      if(ctx.ellipse){
          ctx.ellipse(300,300,200,100,0,0,Math.PI*2);
          ctx.fillStyle="blue";
          ctx.strokeStyle="#000";
          ctx.fill();
          ctx.stroke();
      }else{
          alert("no ellipse!");
      } 
  }
</script>
</body>
</html>

canvas画的椭圆效果如下：

canvas怎么绘制一个椭圆形

说明：这种方法目前似乎只有谷歌支持，其他浏览器还未存在ellipse()。

既然上述方法无法支持其他浏览器，我们就来看看其他canvas绘制椭圆的方法。

一、利用canvas画圆的方法来绘制一个椭圆

这种方法用到了一个canvas函数scale，scale函数能实现canvas的缩放。缩放有水平和垂直两个方向，代码中把canvas水平方向放大了，而垂直方向不变，因此，原来arc画出的圆形就变成了一个椭圆。

canvas绘制椭圆的代码如下：

<!DOCTYPE HTML>
<html>
<head>
  <style>
    body {
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="578" height="200"></canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var centerX = 0;
    var centerY = 0;
    var radius = 50;
    // save state
    context.save();
    // translate context
    context.translate(canvas.width / 2, canvas.height / 2);
    // scale context horizontally
    context.scale(2, 1);
    // draw circle which will be stretched into an oval
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    // restore to original state
    context.restore();
    // apply styling
    context.fillStyle = 'pink';
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = 'black';
    context.stroke();
  </script>
</body>
</html>

canvas椭圆效果如下：

canvas怎么绘制一个椭圆形

二、canvas画椭圆之使用贝赛尔曲线绘制椭圆

这种方法绘制椭圆是把一个椭圆分成了4条贝塞尔曲线，用他们连成了一个椭圆。

canvas绘制椭圆的代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>椭圆</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
  当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script>
  var canvas = document.getElementById("canvas");
  canvas.width = 600;
  canvas.height = 600;
  var context = canvas.getContext("2d");
      context.lineWidth = 10;
      context.strokeStyle="black";
      BezierEllipse2(context, 470, 200, 100, 20); //椭圆
  function BezierEllipse2(ctx, x, y, a, b){
      var k = .5522848,
      ox = a * k, // 水平控制点偏移量
      oy = b * k; // 垂直控制点偏移量</p> <p> ctx.beginPath();
      //从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
      ctx.moveTo(x - a, y);
      ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
      ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
      ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
      ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
      ctx.closePath();
      ctx.stroke();
  };
</script>
</body>
</html>

canvas椭圆效果如下：

canvas怎么绘制一个椭圆形

三、canvas画椭圆之使用两条贝赛尔曲线画出椭圆

canvas绘制椭圆的代码如下：

//椭圆 
CanvasRenderingContext2D.prototype.oval = function (x, y, width, height) {
var k = (width/0.75)/2, 
w = width/2, 
h = height/2; 
this.beginPath(); 
this.moveTo(x, y-h); 
this.bezierCurveTo(x+k, y-h, x+k, y+h, x, y+h); 
this.bezierCurveTo(x-k, y+h, x-k, y-h, x, y-h); 
this.closePath(); return this; 
}

注意：这个方法只需要记住这一点，椭圆的宽度与画出椭圆的贝赛尔曲线的控制点的坐标比例如下：

贝塞尔控制点x=(椭圆宽度/0.75)/2。

关于 "canvas如何绘制一个椭圆形" 就介绍到此。希望多多支持编程宝库。

本文讲解"Canvas中toDataURL()报错的解决方法"，用于解决相关问题。【场景】用户打开网页，则请求腾讯COS（图片服务器）上的图片。使用canvas绘图。然后，用户可以重新选择 ...