首頁 >web前端 >H5教程 >canvas如何來繪製一個橢圓形?canvas畫橢圓的方法總結

canvas如何來繪製一個橢圓形?canvas畫橢圓的方法總結

不言原創: 2018-09-30 09:17:3912587瀏覽

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畫的橢圓效果如下：

canvas如何來繪製一個橢圓形?canvas畫橢圓的方法總結

說明：這個方法目前似乎只有Google支持，其他瀏覽器還未存在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橢圓效果如下：

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。

這篇文章到這裡就結束了，更多精彩內容可以關注php中文網。

以上是canvas如何來繪製一個橢圓形?canvas畫橢圓的方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：html5需要遵守的6個原則（介紹）下一篇：html5需要遵守的6個原則（介紹）

看更多