canvas怎么绘制一个椭圆形
canvas怎么绘制一个椭圆形?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
专注于为中小企业提供网站制作、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业石棉免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
首先我们来看一下canvas自带的绘制椭圆的方法
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)。
参数(从左到右):
(起点x,起点y,半径x,半径y,旋转的角度,起始角,结果角,顺时针还是逆时针)
我们来看canvas自带的绘制椭圆的方法代码:
椭圆
canvas画的椭圆效果如下:
说明:这种方法目前似乎只有谷歌支持,其他浏览器还未存在ellipse()。
既然上述方法无法支持其他浏览器,我们就来看看其他canvas绘制椭圆的方法。
一、利用canvas画圆的方法来绘制一个椭圆
这种方法用到了一个canvas函数scale,scale函数能实现canvas的缩放。缩放有水平和垂直两个方向,代码中把canvas水平方向放大了,而垂直方向不变,因此,原来arc画出的圆形就变成了一个椭圆。
canvas绘制椭圆的代码如下:
canvas椭圆效果如下:
二、canvas画椭圆之使用贝赛尔曲线绘制椭圆
这种方法绘制椭圆是把一个椭圆分成了4条贝塞尔曲线,用他们连成了一个椭圆。
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。
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
网站标题:canvas怎么绘制一个椭圆形
网站地址:http://pwwzsj.com/article/gesepd.html