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('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画的椭圆效果如下:

canvas如何来绘制一个椭圆形?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如何来绘制一个椭圆形?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。

本篇文章到这里就结束了,更多精彩内容可以关注5G云资源分享网。

标签
DT素材网

DT素材网

215

0

0

( 此人很懒并没有留下什么~~ )