canvas画笑脸

news2024/9/21 18:03:32

用到

stroke()控制线条
fill()填充区域；fillStyle填充样式
beginPath()和closePath() ：两个不相关路径间需要配合使用
线性渐变createLinearGradient(x0, y0, x1, y1)，
- x0:起点的 x 轴坐标。
- y0：起点的 y 轴坐标。
- x1：终点的 x 轴坐标。
- y1：终点的 y轴坐标。
径向渐变：createRadialGradient(x0, y0, r0, x1, y1, r1)
- x0：起始圆的x轴坐标，
- y0：起始圆的x轴坐标，
- r0：起始圆的半径。必须是非负数且有限。
- x1：端圆的 x 轴坐标，
- y1：端圆的 y轴坐标，
- r1：结束圆的半径。必须是非负数且有限。
addColorStop(偏移量（偏移量在0-1之间）,'颜色')
画正圆：arc(x, y, radius, startAngle, endAngle, counterclockwise)，
- x,y：中心点坐标；radius：半径；
- startAngle：圆弧开始的弧度，从x轴正处测量（转换为角度：角度* Math.PI / 180）
- endAngle：圆弧结束的弧度，从x轴正处测量（转换为角度：角度* Math.PI / 180）
- counterclockwise：布尔值，顺时针（false）还是逆时针（true）圆弧，默认顺时针
画椭圆： ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise)
- x，y：椭圆中心点x轴和y轴坐标；
- radiusX：椭圆长轴半径，非负数；
- radiusY：椭圆短轴半径，非负数；
- rotation：椭圆旋转角度，以弧度表示，可用角度* Math.PI / 180 转换为角度；
- startAngle：偏心角，从正 x 轴顺时针测量并以弧度表示（就是从哪个角度开始画椭圆的线段起点）；
- endAngle：偏心角，从正 x 轴顺时针测量并以弧度表示（就是从哪个角度结束画椭圆的线段终点）；
- counterclockwise：布尔值，顺时针（false）还是逆时针（true）圆弧，默认顺时针

<body>
    <canvas width="600" height="400" id="canvas"></canvas>
    <script>
        // 1、获取canvas（画布标签）
        const canvas = document.getElementById('canvas')
        // 2、获取画笔对象
        const context = canvas.getContext('2d');

        // 3、画圆 (两种画圆方式都可以)
        // 3.1 画外面的大圆
        // context.arc(300, 200, 100, 0 * Math.PI / 180, 360 * Math.PI / 180)
        context.arc(300, 200, 100, 0, 2 * Math.PI)
        // context.fillStyle = 'red' // 填充颜色
        let g = context.createLinearGradient(200,100,400,200) // 200,100：起点xy轴坐标；400,200：终点xy轴坐标
        g.addColorStop(0,'yellow')
        g.addColorStop(1,'red')
        context.fillStyle = g // 填充渐变颜色


        context.fill()
        context.stroke() // 控制外边框线条是否显现


        // 3.2画左眼 (需要定位好坐标)
        // 在两个不相关的图形之间，需要告诉context,重新生成一个新的路径context.beginPath()
        context.beginPath()
        context.arc(250, 150, 20, 0 * Math.PI / 180, 360 * Math.PI / 180)
        context.stroke()
        // 有一个配合路径，闭合路径 context.closePath()
        context.closePath()

        // 3.2 画右眼
        context.beginPath()
        context.arc(350, 150, 20, 0 * Math.PI / 180, 360 * Math.PI / 180)
        context.stroke()
        context.closePath()

        // 3.3 画鼻子
        context.beginPath()
        context.ellipse(300, 200, 10, 20, 0, 0, 2 * Math.PI)
        context.stroke()
        context.closePath()

        // 3.4 画嘴巴 半圆弧
        context.beginPath()
        context.arc(300, 200, 80, 0 * Math.PI / 180, 180 * Math.PI / 180)
        context.stroke()
        context.closePath()
    </script>
</body>

效果

此处用的是线性渐变的样式，也可改为其他样式，比如径向渐变createRadialGradient(x0, y0, r0, x1, y1, r1) addColorStop(偏移量（偏移量在0-1之间）,'颜色')

        let g = context.createRadialGradient(250,150,0,250,150,150) 
        g.addColorStop(0,'yellow')
        g.addColorStop(1,'red')

        context.fillStyle = g // 填充渐变颜色

径向渐变效果：