17-使用椭圆制作鼻子

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

<!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
    }

    // 1.创建canvas标签
    const canvas = document.createElement('canvas')
    canvas.width = 600
    canvas.height = 400
    document.body.append(canvas)
    // 2.得到context对象
    const context = canvas.getContext('2d')

    // 画笑脸
    // 3.1 画外面的大圆
    context.arc(300,200,100,0, toArc(360))
    context.stroke()

    // 在两个不相干的图形之间，需要告诉 context，重新生成一个新的路径
    // context.beginPath()  context.closePath()
    context.beginPath()

    // 3.2 画左眼
    context.arc(250,180,20,0,toArc(360))
    context.stroke()

    // 3.3 画右眼
    context.beginPath()
    context.arc(350,180,20,0,toArc(360))
    context.stroke()

    // 3.4 画鼻子
    context.beginPath()
    context.ellipse(300,200,5,10,0,0,toArc(360))
    context.stroke()
    context.closePath()

    // 3.5 画嘴巴
    context.beginPath()
    context.arc(300,230,20,0,toArc(180))
    context.stroke()

</script>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/958345.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！