如何使⽤canvas绘制椭圆，扩展⾮chrome浏览器中的ellipse⽅法
  这篇博⽂主要针对浏览器中绘制椭圆的⽅法扩展。在⽹上搜索了很多，发现他们绘制椭圆的⽅式都有缺陷。其中有压缩法，计算法，贝塞尔曲线法等多种⽅式。但是都不能很好的绘制出椭圆。所有我就对这个绘制椭圆的⽅式进⾏了研究，发现压缩法是可以完美实现椭圆绘制的。废话不多说，直接上代码了。
if (!CanvasRenderingContext2D.prototype.ellipse) {
CanvasRenderingContext2D.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle,
anticlockwise) {
var r = radiusX > radiusY ? radiusX : radiusY; //⽤打的数为半径chrome浏览器国内能用吗
var scaleX = radiusX / r; //计算缩放的x轴⽐例
var scaleY = radiusY / r; //计算缩放的y轴⽐例
this.save(); //保存副本
this.scale(scaleX, scaleY); //进⾏缩放
this.arc(0, 0, r, startAngle, endAngle, anticlockwise); //绘制圆形
}
}
这⾥给解释⼀下别的博⽂⾥⾯中的压缩法为啥不正确.下⾯我抄袭别⼈⼀段代码，来解析⼀下为啥错误.
1<!DOCTYPE html>
2<html>
3<head lang="en">
4<meta charset="UTF-8">
5<title>椭圆</title>
6</head>
7<body>
8<canvas id="canvas" >
9当前浏览器不⽀持Canvas，请更换浏览器后再试
10</canvas>
11<script>
12var canvas = ElementById("canvas");
13    canvas.width = 600;
14    canvas.height = 600;
15var context = Context("2d");
16        context.lineWidth = 10;
17        context.strokeStyle="black";
18        EvenCompEllipse(context, 130, 200, 100, 20); //椭圆
19function EvenCompEllipse(context, x, y, a, b){
20        context.save();
21//选择a、b中的较⼤者作为arc⽅法的半径参数
22var r = (a > b) ? a : b;
23var ratioX = a / r; //横轴缩放⽐率
24var ratioY = b / r; //纵轴缩放⽐率
25        context.scale(ratioX, ratioY); //进⾏缩放（均匀压缩）
26        context.beginPath();
27//从椭圆的左端点开始逆时针绘制
28        veTo((x + a) / ratioX, y / ratioY);
29        context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
30        context.closePath();
31        context.stroke();
32        store();
33    };
34</script>
35</body>
36</html>
他绘制的效果如下
为什么会出现这种情况呢.因为他在绘制的时候先绘制了，然后才还原.这样的话是压缩的⼀个路径，在绘制的时候就会连线条也进⾏压缩.⽽我的
那段代码中并没有直接进⾏绘制.⽽是进⾏了还原操作.下⾯我给⼀段⽰例代码.⼤家可以直接进⾏试验. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas绘制椭圆</title>
</head>
<body>
<canvas id="canvas" width='500' height='500'></canvas>
<script>
if (!CanvasRenderingContext2D.prototype.ellipse) {
CanvasRenderingContext2D.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle,                    anticlockwise) {
var r = radiusX > radiusY ? radiusX : radiusY; //⽤打的数为半径
var scaleX = radiusX / r; //计算缩放的x轴⽐例
var scaleY = radiusY / r; //计算缩放的y轴⽐例
this.save(); //保存副本
this.scale(scaleX, scaleY); //进⾏缩放
this.arc(0, 0, r, startAngle, endAngle, anticlockwise); //绘制圆形
}
}
var ctx = ElementById("canvas").getContext("2d");
ctx.beginPath();
ctx.ellipse(300, 300, 150, 100, 30 * Math.PI / 180, 0, Math.PI * 2);
ctx.lineWidth = 10; //设定线宽为10
ctx.stroke();
ctx.closePath();
</script>
</body>
</html>
实际效果如下:
由此可见，其实压缩法是完全可以实现椭圆绘制的.只是⼤部分博⽂⾥⾯使⽤的都不太对⽽已.
如果你觉得我的⽅式对的话，希望你能够进⾏转发.让更多的⼈知道这种绘制椭圆的⽅法.谢谢.

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