Heim >Web-Frontend >H5-Tutorial >Wie zeichnet man eine Ellipse mit Leinwand? Zusammenfassung der Methoden zum Zeichnen von Ellipsen mit Leinwand

Wie zeichnet man eine Ellipse mit Leinwand? Zusammenfassung der Methoden zum Zeichnen von Ellipsen mit Leinwand

不言Original: 2018-09-30 09:17:3912600Durchsuche

canvas元素在html5中是用于在浏览器中画图的，所以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(&#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>

canvas画的椭圆效果如下：

Wie zeichnet man eine Ellipse mit Leinwand? Zusammenfassung der Methoden zum Zeichnen von Ellipsen mit Leinwand

说明：这种方法目前似乎只有谷歌支持，其他浏览器还未存在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(&#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>

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

Wie zeichnet man eine Ellipse mit Leinwand? Zusammenfassung der Methoden zum Zeichnen von Ellipsen mit Leinwand

三、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。

本篇文章到这里就结束了，更多精彩内容可以关注php中文网。

Das obige ist der detaillierte Inhalt vonWie zeichnet man eine Ellipse mit Leinwand? Zusammenfassung der Methoden zum Zeichnen von Ellipsen mit Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：6 Prinzipien, die HTML5 einhalten muss (Einführung)Nächster Artikel：6 Prinzipien, die HTML5 einhalten muss (Einführung)

In Verbindung stehende Artikel

Mehr sehen