php椭圆形制图,canvas如何来绘制一个椭圆形?canvas画椭圆的方法总结

canvas元素在html5中是用于在浏览器中画图的，所以canvas可以实现绘制很多不同的图，那么，今天我们就来看一看canvas如何来绘制一个椭圆形，话不多说，让我们来直接看正文吧。

首先我们来看一下canvas自带的绘制椭圆的方法

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

参数(从左到右)：

(起点x,起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针)

我们来看canvas自带的绘制椭圆的方法代码：

椭圆

当前浏览器不支持Canvas，请更换浏览器后再试

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!");

}

}

canvas画的椭圆效果如下：

说明：这种方法目前似乎只有谷歌支持，其他浏览器还未存在ellipse()。

既然上述方法无法支持其他浏览器，我们就来看看其他canvas绘制椭圆的方法。

一、利用canvas画圆的方法来绘制一个椭圆

这种方法用到了一个canvas函数scale，scale函数能实现canvas的缩放。缩放有水平和垂直两个方向，代码中把canvas水平方向放大了，而垂直方向不变，因此，原来arc画出的圆形就变成了一个椭圆。

canvas绘制椭圆的代码如下：

body {

margin: 0px;

padding: 0px;

}

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();

canvas椭圆效果如下：

二、canvas画椭圆之使用贝赛尔曲线绘制椭圆

这种方法绘制椭圆是把一个椭圆分成了4条贝塞尔曲线，用他们连成了一个椭圆。

canvas绘制椭圆的代码如下：

椭圆

当前浏览器不支持Canvas，请更换浏览器后再试

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; // 垂直控制点偏移量

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();

};

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中文网。