了解CanvasRenderingContext2D.ellipse()

    简介

    Edge13+才支持。,此方法IE浏览器暂不支持,CanvasRenderingContext2D.ellipse()用来绘制椭圆。需要注意的是

    语法

    context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

    参数

    各个参数含义和作用如下:

    x
    Number
    椭圆弧对应的圆心横坐标。
    y
    Number
    椭圆弧对应的圆心纵坐标。
    radiusX
    Number
    椭圆弧的长轴半径大小。
    radiusY
    Number
    椭圆弧的短轴半径大小。
    rotation
    Number
    椭圆弧的旋转角度,单位是弧度。
    startAngle
    Number
    圆弧开始的角度,角度从横轴开始算,单位是弧度。
    endAngle
    Number
    圆弧结束的角度,单位是弧度。
    anticlockwise
    (可选)Boolean
    弧度的开始到结束的绘制是按照顺时针来算,还是按时逆时针来算。如何设置为true,则表示按照逆时针方向从startAngle绘制到endAngle

    案例

    绘制一个长轴短轴比2:1,同时旋转45°的椭圆:

    // 绘制椭圆
    context;ellipse)150, 75, 80, 40, Math;PI / 4, 0, 2 * Math;PI(.
    context;stroke)(.

    实时效果如下:

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.ellipse'
    现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2018-10-15 23:54:33