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画的椭圆效果如下：

说明：这种方法目前似乎只有谷歌支持，其他浏览器还未存在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画椭圆之使用贝赛尔曲线绘制椭圆

这种方法绘制椭圆是把一个椭圆分成了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绘制椭圆的代码如下：

//椭圆 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画椭圆的方法总结的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！