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画椭圆的方法总结的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

html5 canvas图像处理的实现代码分享

canvas引入跨域的图片导致todataurl()报错的问题的解决

h5canvas实现黑客帝国矩形阵效果代码

html5 canvas渐进填充与透明实现图像的mask效果

怎样用canvas绘制星空,月亮,大地,添加文字

canvas转存为图片实例教程

如何使用html5 canvas绘制文字

html5 canvas粒子形成下雪背景的效果

html5 canvas平铺的代码详解

使用html5 canvas api中的clip()方法裁剪区域图像代码实例

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




打赏

取消

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

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

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

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

评论

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