Home >Web Front-end >H5 Tutorial >How to draw an ellipse with canvas? Summary of methods for drawing ellipses with canvas

How to draw an ellipse with canvas? Summary of methods for drawing ellipses with canvas

不言Original: 2018-09-30 09:17:3912573browse

The canvas element in HTML5 is used to draw pictures in the browser, so canvas can draw many different pictures. So, today we will take a look at how canvas draws an ellipse. Without further ado, Let’s get straight to the text.

First let’s take a look at the method of drawing an ellipse that comes with canvas

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

Parameters (from left to right):

(starting point x, starting point y, radius x, radius y, angle of rotation, starting point Starting angle, result angle, clockwise or counterclockwise)

Let’s look at the method code for drawing an ellipse that comes with 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(&#39;2d&#39;);
        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>

drawn by canvas The ellipse effect is as follows:

How to draw an ellipse with canvas? Summary of methods for drawing ellipses with canvas

Note: This method seems to be only supported by Google at present, and ellipse() does not yet exist in other browsers.

Since the above method cannot support other browsers, let's take a look at other

canvas methods of drawing ellipses.

1. Use canvas to draw a circle to draw an ellipse

This method uses a canvas function scale, which can realize the scaling of canvas. . There are two directions of scaling: horizontal and vertical. In the code, the canvas is enlarged in the horizontal direction, but the vertical direction remains unchanged. Therefore, the circle originally drawn by arc becomes an ellipse.

The code for canvas drawing ellipse is as follows:

<!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(&#39;myCanvas&#39;);
      var context = canvas.getContext(&#39;2d&#39;);
      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 = &#39;pink&#39;;
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = &#39;black&#39;;
      context.stroke();
    </script>
  </body>
</html>

The canvas ellipse effect is as follows:

2. Use Bezier curve to draw an ellipse on canvas

This method of drawing an ellipse divides an ellipse into Four Bezier curves are connected to form an ellipse.

The code for canvas drawing ellipse is as follows:

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

The canvas ellipse effect is as follows:

How to draw an ellipse with canvas? Summary of methods for drawing ellipses with canvas

3. Use two Bezier curves to draw an ellipse on canvas

##The code for drawing an ellipse on canvas is as follows:

//椭圆 
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; 
}

Note: This method only needs to remember this point. The ratio of the width of the ellipse to the coordinates of the control points of the Bezier curve that draws the ellipse is as follows:

Bezier control point x=(ellipse width/0.75) /2.

This article ends here. For more exciting content, you can pay attention to the php Chinese website.

The above is the detailed content of How to draw an ellipse with canvas? Summary of methods for drawing ellipses with canvas. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：6 principles that html5 needs to abide by (introduction)Next article：6 principles that html5 needs to abide by (introduction)

See more

How to draw an ellipse with canvas? Summary of methods for drawing ellipses with canvas

Related articles