17-使用椭圆制作鼻子

最新推荐文章于 2025-06-06 18:04:50 发布

四喜花露水

最新推荐文章于 2025-06-06 18:04:50 发布

阅读量214

点赞数 5

分类专栏： Canvas 文章标签：前端 javascript

本文链接：https://blog.csdn.net/gaowxx/article/details/145326072

版权

Canvas 专栏收录该内容

32 篇文章

订阅专栏

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>