小猪佩奇.js

唱一首情歌.

已于 2024-07-24 17:41:43 修改

阅读量169

点赞数 7

分类专栏：前端经验文章标签： javascript 开发语言 ecmascript 小猪佩奇 js

于 2024-07-24 17:31:39 首次发布

本文链接：https://blog.csdn.net/lele66688888/article/details/140668847

版权

前端经验专栏收录该内容

42 篇文章 0 订阅

订阅专栏

闲着没事使用js 画一个小猪佩奇把

<!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>
    <canvas id="myCanvas" width="1000" height="1000"></canvas>
    <script src="./drawPig.js"></script>
</body>

</html>

FunPig();
//小猪佩奇
function FunPig() {

    var ct = document.getElementById('myCanvas').getContext('2d');


    ct.beginPath()  //开始
    ct.lineWidth = "3";
    ct.strokeStyle = "pink";
    //起点
    ct.moveTo(75, 15);         //控制范围  结束
    //context.quadraticCurveTo(cpx, cpy, x, y);
    ct.quadraticCurveTo(220, 26, 220, 160);    //第一步







    ct.moveTo(219, 141);
    ct.quadraticCurveTo(240, 300, 70, 250);    //第三步
    //   ct.stroke()
    ct.moveTo(76, 253);
    ct.quadraticCurveTo(16, 220, 74, 111);

    ct.moveTo(73, 112);
    ct.quadraticCurveTo(60, 112, 31, 83);
    ct.moveTo(31, 83);
    ct.quadraticCurveTo(23, 26, 75, 15);
    ct.moveTo(75, 15);
    ct.quadraticCurveTo(108, 32, 99, 61);
    ct.moveTo(99, 61);
    ct.quadraticCurveTo(66, 101, 31, 81);
    ct.stroke();
    //  鼻子的两个孔
    ct.beginPath();
    ct.arc(48, 48, 6, 0 * Math.PI, 2.5 * Math.PI);
    ct.stroke();
    ct.beginPath();
    ct.arc(77, 48, 6, 0 * Math.PI, 2.5 * Math.PI);
    ct.stroke();
    //耳朵

    //左耳朵
    ct.beginPath();
    ct.moveTo(149, 31);
    ct.quadraticCurveTo(155, 0, 189, 6);
    ct.moveTo(189, 6);
    ct.quadraticCurveTo(188, 30, 170, 44);
    //右耳朵
    ct.moveTo(188, 59);
    ct.quadraticCurveTo(198, 24, 222, 32);
    ct.moveTo(222, 32);
    ct.quadraticCurveTo(255, 54, 199, 75);
    ct.stroke();

    //嘴巴
    ct.beginPath();
    ct.arc(93, 178, 30, 0 * Math.PI, 2.5 * Math.PI);
    ct.stroke();
    //眼睛
    ct.beginPath();
    ct.strokeStyle = " #BDBDBD";

    ct.arc(141, 67, 14, 0 * Math.PI, 2.5 * Math.PI);

    ct.stroke();
    ct.beginPath();
    ct.strokeStyle = "#000000";

    ct.arc(136, 64, 6, 0 * Math.PI, 2.5 * Math.PI);
    ct.stroke();

    ct.beginPath();
    ct.strokeStyle = " #BDBDBD";

    ct.arc(170, 88, 14, 0 * Math.PI, 2.5 * Math.PI);
    ct.stroke();
    ct.beginPath();
    ct.strokeStyle = "#000000";
    ct.fillStyle = "#FF0000";
    ct.arc(165, 87, 6, 0 * Math.PI, 2.5 * Math.PI);
    ct.stroke();

    // 粉红嘴腮
    ct.beginPath();

    ct.strokeStyle = " #CD8C95";
    ct.arc(178, 147, 20, 0 * Math.PI, 2.5 * Math.PI);
    ct.stroke();

    //身体
    ct.beginPath();
    ct.strokeStyle = "red";
    ct.moveTo(195, 245);
    ct.quadraticCurveTo(215, 215, 244, 410);
    ct.moveTo(244, 410);
    ct.quadraticCurveTo(244, 410, 38, 410);
    ct.moveTo(38, 410);
    ct.quadraticCurveTo(11, 410, 76, 251);
    ct.stroke();

    //两只手

    ct.beginPath();
    ct.strokeStyle = "pink";
    ct.moveTo(58, 294);
    ct.quadraticCurveTo(50, 288, 12, 238);
    ct.moveTo(56, 300);
    ct.quadraticCurveTo(56, 300, 16, 260);
    ct.lineTo(3, 269);
    ct.lineTo(11, 250);
    ct.lineTo(3, 228);
    ct.lineTo(15, 241);
    ct.stroke();
    //右手
    ct.beginPath();
    ct.moveTo(223, 292);
    ct.quadraticCurveTo(266, 288, 287, 271);
    ct.moveTo(287, 271);
    ct.quadraticCurveTo(236, 233, 279, 245);
    ct.moveTo(279, 245);
    ct.quadraticCurveTo(255, 200, 295, 247);
    ct.moveTo(295, 247);
    ct.quadraticCurveTo(288, 200, 306, 226);
    ct.moveTo(306, 226);
    ct.quadraticCurveTo(311, 250, 308, 248);
    ct.moveTo(308, 248);
    ct.quadraticCurveTo(344, 200, 334, 245);
    ct.moveTo(334, 245);
    ct.quadraticCurveTo(311, 280, 300, 280);
    ct.moveTo(300, 280);
    ct.quadraticCurveTo(311, 280, 224, 303);
    ct.stroke();
    ct.beginPath();
    ct.moveTo(94, 409);
    ct.quadraticCurveTo(94, 409, 96, 451);
    ct.moveTo(96, 451);
    ct.quadraticCurveTo(53, 429, 56, 461);
    ct.moveTo(56, 461);
    ct.quadraticCurveTo(56, 461, 107, 464);
    ct.lineTo(106, 409);
    ct.moveTo(183, 411);
    ct.lineTo(182, 447);
    ct.quadraticCurveTo(124, 434, 136, 464);
    ct.lineTo(196, 463);
    ct.lineTo(195, 409);
    ct.stroke();
    ct.beginPath();
    ct.lineWidth = "7";
    ct.strokeStyle = "pink";
    ct.lineCap = "round";
    ct.moveTo(238, 360);
    ct.quadraticCurveTo(266, 380, 267, 360);
    ct.quadraticCurveTo(254, 330, 250, 380);
    ct.quadraticCurveTo(254, 420, 290, 369);
    ct.stroke();




}

小猪佩奇出来了

第二种

纯css

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用css画一个小猪佩奇</title>
    <style type="text/css">
        div {
            position: absolute;
            transform-origin: left top;
        }

        .pig_container {
            width: 800px;
            height: 800px;
            top: 0;
            left: 50px;
        }

        .pig_head {
            width: 300px;
            height: 200px;
            top: 100px;
            left: 100px;
            border-radius: 95% 50% 50% 50%/ 87% 80% 68% 50%;
            border: 6px solid #ef96c2;
            background-color: #ffb3da;
            transform: rotate(30deg);
            z-index: 100;
            box-sizing: border-box;
        }

        .pig_head_white_left_bottom {
            width: 200px;
            height: 154px;
            bottom: -7px;
            left: -38px;
            background-color: #fff;
            box-sizing: border-box;
        }

        .pig_head_white_left_top {


            width: 200px;
            height: 66px;
            bottom: 84px;
            background-color: #ffb3da;
            box-sizing: border-box;
            top: 166px;
            left: 134px;
            transform: rotate(34deg);
            z-index: 103;
        }

        .left_eye,
        .right_eye,
        .face,
        .mouth {
            z-index: 104;
        }

        .pig_nose {
            width: 51px;
            height: 70px;
            top: 147px;
            left: 107px;
            border-radius: 72% 72% 72% 72%/ 72% 72% 72% 72%;
            border: 6px solid #ef96c2;
            background-color: #ffb3da;
            transform: rotate(36deg);
            z-index: 103;
            box-sizing: border-box;
        }

        .pig_nose_bottom {
            width: 88px;
            height: 13px;
            top: 209px;
            left: 84px;
            border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
            border: 6px solid #ef96c2;
            background-color: #ffb3da;
            transform: rotate(35deg);
            z-index: 102;
            box-sizing: border-box;
            border-top-color: #ffb3da;
        }

        .pig_jaw {
            width: 97px;
            height: 104px;
            top: 249px;
            left: 141px;
            border-radius: 0% 0% 0% 76%/ 0% 0% 0% 74%;
            border: 6px solid #ef96c2;
            background-color: #ffb3da;
            transform: rotate(22deg);
            z-index: 100;
            box-sizing: border-box;
            border-top-color: #ffb3da;
            border-right-color: #ffb3da;
        }

        .pig_jaw_right {
            width: 13px;
            height: 6px;
            background-color: #ef96c2;
            top: 373px;
            left: 186px;
            transform: rotate(19deg);
            z-index: 100;
        }

        .left_eye_bg {
            width: 29px;
            height: 29px;
            top: 177px;
            left: 170px;
            border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
            border: 6px solid #fff;
            background-color: #fff;
            z-index: 101;
            box-sizing: border-box;
        }

        .left_eye_ball {
            width: 10px;
            height: 10px;
            top: 181px;
            left: 171px;
            border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
            border: 6px solid #000;
            background-color: #000;
            z-index: 101;
            box-sizing: border-box;
        }

        .left_eye_border {
            width: 34px;
            height: 34px;
            top: 174px;
            left: 166px;
            border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
            border: 6px solid #ef96c2;
            background-color: transparent;
            z-index: 101;
            box-sizing: border-box;
        }

        .right_eye_bg {
            width: 28px;
            height: 28px;
            top: 194px;
            left: 205px;
            border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
            border: 6px solid #fff;
            background-color: #fff;
            z-index: 101;
            box-sizing: border-box;
        }

        .right_eye_ball {
            width: 10px;
            height: 10px;
            top: 199px;
            left: 208px;
            border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
            border: 6px solid #000;
            background-color: #000;
            z-index: 101;
            box-sizing: border-box;
        }

        .right_eye_border {
            width: 35px;
            height: 37px;
            top: 191px;
            left: 202px;
            border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
            border: 6px solid #ef96c2;
            background-color: transparent;
            z-index: 101;
            box-sizing: border-box;
        }

        .mouth_bottom {
            width: 97px;
            height: 45px;
            top: 273px;
            left: 154px;
            border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
            border: 6px solid #d44b81;
            background-color: #000;
            z-index: 101;
            box-sizing: border-box;
            transform: rotate(19deg);
        }

        .mouth_middle {
            width: 98px;
            height: 27px;
            top: 272px;
            left: 154px;
            border-radius: 0% 0% 50% 50%/ 0% 0% 100% 100%;
            border: 6px solid #d44b81;
            background-color: #ffb3da;
            z-index: 101;
            box-sizing: border-box;
            transform: rotate(19deg);
            border-top-color: #ffb3da;
        }

        .mouth_top {
            width: 135px;
            height: 66px;
            top: 231px;
            left: 149px;
            border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
            background-color: #ffb3da;
            z-index: 101;
            transform: rotate(13deg);


        }

        .face {
            width: 49px;
            height: 59px;
            top: 243px;
            left: 269px;
            border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
            background-color: #ff96ce;
            transform: rotate(26deg);
        }

        .nose_kong_left {
            width: 12px;
            height: 12px;
            top: 179px;
            left: 93px;
            border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
            background-color: #da6c9b;
            z-index: 104;
        }

        .nose_kong_right {
            width: 12px;
            height: 12px;
            top: 182px;
            left: 109px;
            border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
            background-color: #da6c9b;
            z-index: 104;
        }

        .ear_left {
            width: 24px;
            height: 52px;
            top: 126px;
            left: 226px;
            border: 6px solid #ef96c2;
            border-radius: 50% 50% 50% 50%/ 35% 40% 50% 50%;
            background-color: #ffb3da;
            z-index: 99;
            transform: rotate(18deg);
        }

        .ear_right {
            width: 24px;
            height: 52px;
            top: 150px;
            left: 280px;
            border: 6px solid #ef96c2;
            border-radius: 50% 50% 50% 50%/ 35% 40% 50% 50%;
            background-color: #ffb3da;
            z-index: 99;
            transform: rotate(36deg);
        }

        .pig_body_bottom {
            width: 215px;
            height: 197px;
            top: 305px;
            left: 108px;
            border: 6px solid #e33b32;
            border-radius: 50% 50% 50% 50%/ 100% 100% 0% 0%;
            background-color: #eb5b50;
            z-index: 99;
        }

        .hand_left_middle {
            width: 78px;
            height: 12px;
            top: 432px;
            left: 63px;
            border-radius: 100% 100% 100% 17%/ 100% 90% 16% 90%;
            background-color: #ffbadf;
            z-index: 99;
            transform: rotate(-35deg);
        }

        .hand_left_top {
            width: 28px;
            height: 9px;
            top: 415px;
            left: 63px;
            border-radius: 100% 100% 100% 35%/ 100% 90% 16% 90%;
            background-color: #ffbadf;
            z-index: 99;
        }

        .hand_left_bottom {
            width: 20px;
            height: 9px;
            top: 420px;
            left: 93px;
            border-radius: 60% 59% 65% 90%/ 100% 90% 89% 90%;
            background-color: #ffbadf;
            z-index: 99;
            transform: rotate(98deg);
        }

        .hand_right_middle {
            width: 79px;
            height: 11px;
            top: 374px;
            left: 309px;
            border-radius: 100% 100% 15% 17%/ 99% 92% 90% 90%;
            background-color: #ffbadf;
            z-index: 99;
            transform: rotate(28deg);
        }

        .hand_right_top {
            width: 28px;
            height: 10px;
            top: 397px;
            left: 350px;
            border-radius: 100% 100% 15% 17%/ 99% 92% 90% 90%;
            background-color: #ffbadf;
            z-index: 99;
            transform: rotate(-7deg);
        }

        .hand_right_bottom {
            width: 28px;
            height: 11px;
            top: 395px;
            left: 356px;
            border-radius: 100% 100% 62% 17%/ 99% 92% 90% 90%;
            background-color: #ffbadf;
            z-index: 99;
            transform: rotate(69deg);
        }

        .left_foot {
            width: 11px;
            height: 52px;
            top: 507px;
            left: 175px;
            border-radius: 100% 100% 100% 100%/ 50% 50% 21% 20%;
            background-color: #ffbadf;
            z-index: 99;
        }

        .left_shoes {
            width: 51px;
            height: 14px;
            top: 553px;
            left: 138px;
            border-radius: 58% 187% 180% 50%/ 130% 123% 113% 100%;
            background-color: #000;
            z-index: 99;
            transform: rotate(0deg);
        }

        .right_foot {
            left: 268px;
        }

        .right_shoes {
            left: 230px;
        }

        .pig_shadow {
            width: 240px;
            height: 47px;
            top: 535px;
            left: 101px;
            border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
            background-color: rgba(171, 171, 171, 0.7);
            transform: rotate(-1deg);
        }

        .tail_left {
            width: 19px;
            height: 8px;
            top: 472px;
            left: 330px;
            border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
            transform: rotate(-9deg);
            background-color: #ffbadf;
            z-index: 99;
        }

        .tail_left_blank {
            width: 30px;
            height: 15px;
            top: 466px;
            left: 332px;
            border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
            transform: rotate(-36deg);
            background-color: #fff;
            z-index: 99;
        }

        .tail_right {
            width: 21px;
            height: 5px;
            top: 451px;
            left: 343px;
            border-radius: 0% 0% 51% 50%/ 0% 0% 100% 100%;
            transform: rotate(31deg);
            background-color: #fff;
            z-index: 99;
            border: 8px solid #ffbadf;
            border-top-color: #fff;
        }

        .tail_blank {
            width: 36px;
            height: 21px;
            top: 437px;
            left: 351px;
            transform: rotate(34deg);
            background-color: #fff;
            z-index: 99;
        }

        .tail_middle {
            width: 7px;
            height: 11px;
            top: 450px;
            left: 336px;
            border: 8px solid #ffbadf;
            border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
            background-color: #fff;
            z-index: 99;
        }

        .tail_circle {
            width: 17px;
            height: 8px;
            top: 475px;
            left: 358px;
            border-radius: 36% 37% 62% 63%/ 99% 92% 90% 90%;
            background-color: #ffbadf;
            z-index: 99;
            transform: rotate(-40deg);
        }
    </style>
</head>

<body>

    <div class="pig_container">
        <!-- 尾巴 -->
        <div class="tail_left"></div>
        <div class="tail_right"></div>
        <div class="tail_blank"></div>
        <div class="tail_middle"></div>
        <div class="tail_circle"></div>
        <!-- 底部阴影 -->
        <div class="pig_shadow"></div>
        <!-- 左脚 -->
        <div class="left_foot"></div>
        <div class="left_foot right_foot"></div>
        <!-- 左鞋 -->
        <div class="left_shoes"></div>
        <div class="left_shoes right_shoes"></div>
        <!-- 左手 -->
        <div>
            <div class="hand_left_top"></div>
            <div class="hand_left_bottom"></div>
            <div class="hand_left_middle"></div>
        </div>
        <!-- 身体 -->
        <div class="pig_body_bottom"></div>
        <!-- 右手 -->
        <div>
            <div class="hand_right_top"></div>
            <div class="hand_right_bottom"></div>
            <div class="hand_right_middle"></div>
        </div>

        <!-- 猪头 -->
        <div>
            <!-- 耳朵 -->
            <div class="ear_left"></div>
            <div class="ear_right"></div>
            <div class="pig_head">
                <div class="pig_head_white_left_bottom"></div>
            </div>
            <div class="pig_head_white_left_top"></div>
            <!-- 鼻子 -->
            <div class="pig_nose"></div>
            <!-- 下巴 -->
            <div class="pig_jaw"></div>
            <div class="pig_jaw_right"></div>
            <div class="pig_nose_bottom"></div>
            <!-- 鼻孔 -->
            <div class="nose_kong_left"></div>
            <div class="nose_kong_right"></div>
            <!-- 左眼 -->
            <div class="left_eye">
                <div class="left_eye_bg"></div>
                <div class="left_eye_ball"></div>
                <div class="left_eye_border"></div>
            </div>
            <!-- 右眼 -->
            <div class="right_eye">
                <div class="right_eye_bg"></div>
                <div class="right_eye_ball"></div>
                <div class="right_eye_border"></div>
            </div>
            <!-- 嘴巴 -->
            <div class="mouth">
                <div class="mouth_bottom"></div>
                <div class="mouth_middle"></div>
                <div class="mouth_top"></div>
            </div>
            <!-- 脸颊 -->
            <div class="face"></div>
        </div>
    </div>

</body>

</html>