溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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。
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
