当前位置：首页 > article >正文

16-绘制椭圆

article 2025/1/23 12:44:50

16-绘制椭圆_哔哩哔哩_bilibili16-绘制椭圆是一次性学会 Canvas 动画绘图（核心精讲+50个案例）2023最新教程的第17集视频，该合集共计53集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV16T411B7kP?spm_id_from=333.788.player.switch&vd_source=9218320e7bcc2e793fa8493559f4acd7&p=17

CanvasRenderingContext2D > ellipse()

最后2个参数控制了画线起始位置与终点位置，从0度顺时针画到90度为止。

// 描绘椭圆  x, y, radiusX, radiusY, rotation, startAngle, endAngle
context.ellipse(300, 200, 200, 100, 0, 0, toArc(90) )

第5个参数 rotation 也是接受弧度制，下面是（按顺时针方向）旋转 1弧度

// 描绘椭圆  x, y, radiusX, radiusY, rotation, startAngle, endAngle
context.ellipse(300, 200, 200, 100, 1, 0, toArc(180) )

// 也可以通过 弧度角度转换函数写为如下，顺时针旋转 90度
context.ellipse(300, 200, 200, 100, toArc(90), 0, toArc(180) )

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>
<script>
    // 转换公式 弧度 = 角度 * Math.PI / 180
    function toArc(value) {
        return value * Math.PI / 180
    }

    const canvas = document.createElement('canvas')
    canvas.width = 800
    canvas.height = 500
    document.body.append(canvas)
    const context = canvas.getContext('2d')

    // 描绘椭圆  x, y, radiusX, radiusY, rotation, startAngle, endAngle
    context.ellipse(300, 250, 200, 100, toArc(45), 0, toArc(360) )

    context.stroke()

</script>

</html>

查看全文

http://www.kler.cn/a/514904.html