首页 > 作文

html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形

更新时间:2023-04-03 06:22:03 阅读: 评论:0

在canvas中可以很方便的用arc方法画出圆形,本来圆形也可以看作是一个宽高相等的椭圆,但canvas中根本没有画椭圆的方法,我们要用其他方法来模拟。

我们首先要明确画一个椭圆需要那些参数,基本的几何知识告诉我们,椭圆需要圆心坐标,宽度,高度——或者还有旋转角度,不过这个可以暂时不要,旋转是比较容易的。


1,使用lineto画椭圆
你没有看错,lineto这样一个纯粹用来画直线的方法居然可以用来画椭圆!?但他确实存在,不过写法实在是有些不可思议:

复制代码 代码如下:

function drawellip(canvas,o,oa,ob){

//画椭圆,例子:var b=new array(150,150); drawellip(hb,b,50,30);

with (canvas){

var x=o[0]+oa;

var y=o[1];

moveto(x,y);

for (var i=0;i<=360;i++){

var ii=i*math.pi/180;

var x=o[0]+跨年留言oa*math.cos(ii);

var y=o[1]-ob*math.sin(ii);

lineto(x,y);

}

}

}

这个方法的原理是,一个圆有360度,那么就用lineto循环360次,画出每一度的线段,最终连成一个椭圆。其中需要用到三角函数正弦余弦进行计算。

注意,这个方法的第2个参数是个数组,即椭圆的圆心坐标.

思路很奇葩,而且画出的椭圆也比较平滑。但不值得大家使用——此方法每画一个椭圆,就要循环360次,只有画的椭圆稍微一多,对浏览器的性能就是个考验。

我们只用了解一下他的思路即可


2,使用arc画圆,然后把他缩放成一个椭圆
这个方法的原文在此,核心函数如下:

复制代码 代码如下:

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, fal);

// restore to original state

context.restore()

此方法用了一个我前面还没讲过的canvas函数,即scale,他能实现canvas的缩放。缩放有水平和垂直两个方向,代码中把canvas水平方向放大了,而垂直方向不变,so,原来arc画出的圆形就变成了一个椭圆。

这个方法初看甚妙,代码少,而且原理浅显易懂。但分析一下就能发现他的明显缺点了,就是——不精确!比如我需要宽171高56的椭圆,此时我们如果把arc的半径定为28的话,那么后面就要为171/28/2这个蛋疼的不知所云的数字郁闷了。

不过有个折中的办法是始终把arc的半径设成100,然后,不够就放大,超过了就缩小。但是,还是不精确。


3,使用贝赛尔曲线beziercurveto
自从觉得上面的缩放法不精确后,我就很想找到一个精确的画椭圆的方法,最后在stackoverflow上找到了:

复制代码 代码如下:

function drawellip(ctx, x, y, w, h) {

var kappa = 0.5522848;

ox = (w / 2) * kappa, // control point offt horizontal

oy = (h / 2) * kappa, // control point offt vertical

xe = x + w, // x-end

ye = y + h, // y-end

xm = x + w / 2, // x-middle

ym = y + h / 2; // y-middle

ctx.beginpath();

ctx.moveto(x, ym);

ctx.beziercurveto(x, ym – oy, xm –略胜一筹的意思; ox, y, xm, y);

ctx.beziercurveto(xm + ox, y, xe, ym – oy, xe, ym);

ctx.beziercurveto(xe, ym + oy, xm + ox, ye, xm, ye);

ctx.beziercurveto(xm – ox, ye, x, ym + oy, x, ym);

ctx.clopath();

ctx.stroke();

}

这个方法可以算是比较完美的了。他把一个椭圆分成了4条贝塞尔曲线,用他们连成了一个椭圆。最后宽度高度也比较精确,开销也较少。

但此方法依然有缺点。大家看那个kappa参数,有个经典现代诗歌很奇特的值,相信很多人在几何专家告诉你为什么他要取这个值之前,都不明白为什么非要取这个值——我到现在还是不知道。并且我有很强烈的想把他改一下看看有什么后果的冲动。

当然我这种类似强迫症患者的冲动并不能说成是此方法的缺点,他真正的缺点是——为什么要用4条贝塞尔曲线?我个人觉得,一个椭圆明显是由两条贝塞尔曲线组成的而不是4条。这个想法最开宠物店终让我找到了最完美的画椭圆的方法。

4
,使用两条贝赛尔曲线画出椭圆
为了了解上一个方法能否精简,我专门注册了一个stackoverflow的帐号去提问,由于问题里有图片,积分不够不能传,我还迫不得已用勉勉强强的英语水平去回答老外的问题挣积分。但最终好运到了,回答一个问题就解决了我的积分问题。

我提的贝赛尔曲线和椭圆的关系的问题在此.

说实话,下面老外的回答我大部分没看懂,但幸亏他提供了一个代码示例页,让我明白了原理,在此对他表示再次的感谢。而根据他的解答,我找到的画椭圆的方法如下:计划员的工作职责

复制代码 代码如下:

//椭圆

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

return this;

}

此方法既精确,又代码少,而且也没有奇怪的难懂的地方。只需要记住这一点,椭圆的宽度与画出椭圆的贝赛尔曲线的控制点的坐标比例如下:

贝塞尔控制点x=(椭圆宽度/0.75)/2这一点已经在代码中体现了。

大家可自行试验上面的4个方法画出椭圆。

如果你发现了更简单的方法,也请分享出来大家探讨吧。

本文发布于:2023-04-03 06:22:01,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/2bfff610ab89b87027cab005414c62fe.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形.doc

本文 PDF 下载地址:html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形.pdf

标签:椭圆   方法   代码   画出
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图