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


当前第2页 返回上一页

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

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

canvas绘制椭圆的代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<!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椭圆效果如下:

2345截图20180920114034.png

三、canvas画椭圆之使用两条贝赛尔曲线画出椭圆

canvas绘制椭圆的代码如下:

1

2

3

4

5

6

7

8

9

10

11

//椭圆

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

以上就是canvas如何来绘制一个椭圆形?canvas画椭圆的方法总结的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

怎样用canvas来绘制弧线和圆

使用html5的canvas和javascript创建一个绘图程序的示例代码

canvas的实例--时钟动画

html5中如何绘制图形以及清空图像

html5利用canvas绘制哆啦a梦头部(代码实例)

canvas 学习 3---画坐标系

html5 canvas实现文本对齐的代码总结

利用html5以及canvas实现支持签名插件的方法

canvas如何绘制时钟?canvas画环形时钟的实现过程

canvas如何做出3d动态的chart图表

更多相关阅读请进入《canvas》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...