儿童节给女儿画个小猪佩奇

末世未然
385 阅读1分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

今天是六一儿童节，也是女儿15天生日，作为爸爸没啥可送给宝贝的，那就用代码画一个小猪佩奇给我的宝宝吧，哈哈哈哈~ 既能省钱，又可以给宝贝女儿做榜样，还可以得到老婆的饶恕，最主要的还是让各位大老爷们图个乐。今天就带大家来用canvas画一个“粉色吹风机”~

画背景

依葫芦画瓢，先画背景，蓝天和绿地

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="cvs" width="500" height="300"></canvas>
    <script>
        const cvs = document.getElementById('cvs');
        const ctx = cvs.getContext('2d');
        ctx.fillStyle = 'rgb(152, 196, 247)';
        ctx.fillRect(0, 0, 500, 180);
        ctx.fillStyle = 'rgb(136, 231, 131)';
        ctx.fillRect(0, 180, 500, 120);
    </script>
</body>
</html>

image.png

画吹风机（哦不，是画个小猪佩奇的头）

先画个鼻子

ctx.ellipse(300, 100, 12, 15, 10 / 180 * Math.PI, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgb(255, 186, 232)';
ctx.strokeStyle = 'rgb(234, 167, 212)';
ctx.lineWidth = 3;
ctx.fill();
ctx.stroke();
ctx.fillStyle = 'rgb(202,123,173)';
ctx.beginPath();
ctx.arc(296, 100, 3, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath()
ctx.beginPath();
ctx.arc(304, 100, 3, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();

bf2f35a66d0d222d0752a1644d6ede8.png

画脸

这里用到了2次贝塞尔曲线，调这个曲线真是个细活啊，我麻了...

ctx.beginPath();
ctx.moveTo(304, 86);
ctx.quadraticCurveTo(365, 70, 400, 90);
ctx.quadraticCurveTo(450, 135, 400, 180);
ctx.quadraticCurveTo(300, 200, 320, 120);
ctx.lineTo(300, 115);
ctx.ellipse(300, 100, 12, 15, 10 / 180 * Math.PI, 0, Math.PI, true)
ctx.fillStyle = 'rgb(255, 186, 232)';
ctx.stroke();
ctx.fill();

image.png

画眼睛

画嘴巴

画脸蛋

画耳朵

画身子

画手

画脚（鞋子）

画尾巴

最后画个影子

画猪妈妈

画乔治

结语

小猪佩奇陪你过六一！觉得不错的点个赞呀！~（未完待续！！！）

avatar
文章
阅读
粉丝