天天看点

小猪佩画法测试代码集合(代码均转载CSDN)

一、Html的小猪佩奇画法

<!DOCTYPE html>
<html>
<head>
    <title>用css画一个小猪佩奇</title>
    <style type="text/css">

    div {
        position: absolute;
        transform-origin: left top;
    }
.pig_container {
    width: px;
    height: px;
    top: ;
    left: px;
}

.pig_head {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    border: px solid #ef96c2;
    background-color: #ffb3da;
    transform: rotate(deg);
    z-index: ;
    box-sizing: border-box;
}
.pig_head_white_left_bottom {
    width: px;
    height: px;
    bottom: -px;
    left: -px;
    background-color: #fff;
    box-sizing: border-box;
}
.pig_head_white_left_top {


    width: px;
    height: px;
    bottom: px;
    background-color: #ffb3da;
    box-sizing: border-box;
    top: px;
    left: px;
    transform: rotate(deg);
    z-index: ;
}
.left_eye, .right_eye, .face, .mouth {
    z-index: ;
}
.pig_nose {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    border: px solid #ef96c2;
    background-color: #ffb3da;
    transform: rotate(deg);
    z-index: ;
    box-sizing: border-box;
}
.pig_nose_bottom {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    border: px solid #ef96c2;
    background-color: #ffb3da;
    transform: rotate(deg);
    z-index: ;
    box-sizing: border-box;
    border-top-color: #ffb3da;
}
.pig_jaw {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    border: px solid #ef96c2;
    background-color: #ffb3da;
    transform: rotate(deg);
    z-index: ;
    box-sizing: border-box;
    border-top-color: #ffb3da;
    border-right-color: #ffb3da;
}
.pig_jaw_right {
    width: px;
    height: px;
    background-color: #ef96c2;
    top: px;
    left: px;
    transform: rotate(deg);
    z-index: ;
}
.left_eye_bg {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    border: px solid #fff;
    background-color: #fff;
    z-index: ;
    box-sizing: border-box;
}
.left_eye_ball {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    border: px solid #000;
    background-color: #000;
    z-index: ;
    box-sizing: border-box;
}
.left_eye_border {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    border: px solid #ef96c2;
    background-color: transparent;
    z-index: ;
    box-sizing: border-box;
}

.right_eye_bg {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    border: px solid #fff;
    background-color: #fff;
    z-index: ;
    box-sizing: border-box;
}
.right_eye_ball {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    border: px solid #000;
    background-color: #000;
    z-index: ;
    box-sizing: border-box;
}
.right_eye_border {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    border: px solid #ef96c2;
    background-color: transparent;
    z-index: ;
    box-sizing: border-box;
}

.mouth_bottom {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    border: px solid #d44b81;
    background-color: #000;
    z-index: ;
    box-sizing: border-box;
    transform: rotate(deg);
}
.mouth_middle {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    border: px solid #d44b81;
    background-color: #ffb3da;
    z-index: ;
    box-sizing: border-box;
    transform: rotate(deg);
    border-top-color: #ffb3da;
}
.mouth_top {
        width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    background-color: #ffb3da;
    z-index: ;
    transform: rotate(deg);


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

.nose_kong_left {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    background-color: #da6c9b;
    z-index: ;
}
.nose_kong_right {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    background-color: #da6c9b;
    z-index: ;
}

.ear_left {
    width: px;
    height: px;
    top: px;
    left: px;
    border: px solid #ef96c2;
    border-radius: % % % %/ % % % %;
    background-color: #ffb3da;
    z-index: ;
    transform: rotate(deg);
}
.ear_right {
    width: px;
    height: px;
    top: px;
    left: px;
    border: px solid #ef96c2;
    border-radius: % % % %/ % % % %;
    background-color: #ffb3da;
    z-index: ;
    transform: rotate(deg);
}

.pig_body_bottom {
    width: px;
    height: px;
    top: px;
    left: px;
    border: px solid #e33b32;
    border-radius: % % % %/ % % % %;
    background-color: #eb5b50;
    z-index: ;
}

.hand_left_middle {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    background-color: #ffbadf;
    z-index: ;
    transform: rotate(-deg);
}
.hand_left_top {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    background-color: #ffbadf;
    z-index: ;
}
.hand_left_bottom {
        width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    background-color: #ffbadf;
    z-index: ;
    transform: rotate(deg);
}

.hand_right_middle {
        width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    background-color: #ffbadf;
    z-index: ;
    transform: rotate(deg);
}
.hand_right_top {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    background-color: #ffbadf;
    z-index: ;
    transform: rotate(-deg);
}
.hand_right_bottom {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    background-color: #ffbadf;
    z-index: ;
    transform: rotate(deg);
}
.left_foot {
        width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    background-color: #ffbadf;
    z-index: ;
}
.left_shoes {
        width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    background-color: #000;
    z-index: ;
    transform: rotate(deg);
}
.right_foot {
    left: px;
}
.right_shoes {
    left: px;
}
.pig_shadow {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    background-color: rgba(, , , );
    transform: rotate(-deg);
}
.tail_left {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    transform: rotate(-deg);
    background-color: #ffbadf;
    z-index: ;
}
.tail_left_blank {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    transform: rotate(-deg);
    background-color: #fff;
    z-index: ;
}
.tail_right {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    transform: rotate(deg);
    background-color: #fff;
    z-index: ;
    border: px solid #ffbadf;
    border-top-color: #fff;
}
.tail_blank {
    width: px;
    height: px;
    top: px;
    left: px;
    transform: rotate(deg);
    background-color: #fff;
    z-index: ;
}
.tail_middle {
    width: px;
    height: px;
    top: px;
    left: px;
    border: px solid #ffbadf;
    border-radius: % % % %/ % % % %;
    background-color: #fff;
    z-index: ;
}
.tail_circle {
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    background-color: #ffbadf;
    z-index: ;
    transform: rotate(-deg);
}

    </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>
           

二.使用canvas画小猪佩奇

<canvas id="myCanvas" width="400" height="500" style="border: 1px solid #808080;  margin-left:400px;" onmousemove="cnvs_getCoordinates(event);" onmouseout="cnvs_clearCoordinates();">看不见我!!!</canvas>


    <script>


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

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


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







            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );    //第三步
            //   ct.stroke()
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );

            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.stroke();
            //  鼻子的两个孔
            ct.beginPath();
            ct.arc(, , ,  * Math.PI,  * Math.PI);
            ct.stroke();
            ct.beginPath();
            ct.arc(, , ,  * Math.PI,  * Math.PI);
            ct.stroke();
            //耳朵

            //左耳朵
            ct.beginPath();
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            //右耳朵
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.stroke();

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

            ct.arc(, , ,  * Math.PI,  * Math.PI);

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

            ct.arc(, , ,  * Math.PI,  * Math.PI);
            ct.stroke();

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

            ct.arc(, , ,  * Math.PI,  * Math.PI);
            ct.stroke();
            ct.beginPath();
            ct.strokeStyle = "#000000";
        ct.fillStyle = "#FF0000";
            ct.arc(, , ,  * Math.PI,  * Math.PI);
            ct.stroke();

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

            ct.strokeStyle = " #CD8C95";
            ct.arc(, , ,  * Math.PI,  * Math.PI);
            ct.stroke();

            //身体
            ct.beginPath();
            ct.strokeStyle = "red";
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.stroke();

            //两只手

            ct.beginPath();
            ct.strokeStyle = "pink";
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.lineTo(, );
            ct.lineTo(, );
            ct.lineTo(, );
            ct.lineTo(, );
            ct.stroke();
            //右手
            ct.beginPath();
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.stroke();
            ct.beginPath();
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );
            ct.moveTo(, );
            ct.quadraticCurveTo(, , , );   
            ct.lineTo(, );
            ct.moveTo(, );           
            ct.lineTo(, );          
            ct.quadraticCurveTo(, , , );          
            ct.lineTo(, );
            ct.lineTo(, );
            ct.stroke();
            ct.beginPath();
            ct.lineWidth = "7";
            ct.strokeStyle = "pink";
            ct.lineCap = "round";
            ct.moveTo(,);
            ct.quadraticCurveTo(, , , );
            ct.quadraticCurveTo(, , , );
            ct.quadraticCurveTo(, , , );
            ct.stroke();




        }


    </script>
           

三.用CSS画小猪佩奇

猪头轮廓样式代码:

position: absolute;
    z-index: ;
    box-sizing: border-box;
    width: px;
    height: px;
    top: px;
    left: px;
    border-radius: % % % %/ % % % %;
    border: px solid #ef96c2;
    background-color: #ffb3da;
    transform: rotate(deg);
    transform-origin: left top;
           

嘴巴

三个半椭圆依次叠加即可~同样是图层遮盖来实现。

五肢

其实画到这里基本上对 border-radius 的使用很熟练了,参数的设置也大概心中有数,剩下的也就工作量的问题了。

合体

其余的部分画法大同小异,五官的摆放要特别注意比例和尺寸,比如身体就很容易因为大小不合适而成了胖佩奇/瘦佩奇,这里可以借助 photoshop 的标尺。同时用取色器拿到佩奇各部分颜色,接下来就是整体的调试了。

<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 class="pig_head_white_left_top"></div>
        </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>
           

四.用python的turtle进行画图

# coding:utf-8

import turtle as t
t.pensize() # 设置画笔的大小
t.colormode() # 设置GBK颜色范围为0-255
t.color((,,),"pink") # 设置画笔颜色和填充颜色(pink)
t.setup(,) # 设置主窗口的大小为840*500
t.speed() # 设置画笔速度为10
#鼻子
t.pu() # 提笔
t.goto(-,) # 画笔前往坐标(-100,100)
t.pd() # 下笔
t.seth(-) # 笔的角度为-30°
t.begin_fill() # 外形填充的开始标志
a=
for i in range():
   if <=i< or <=i<:
       a=a+
       t.lt() #向左转3度
       t.fd(a) #向前走a的步长
   else:
       a=a-
       t.lt()
       t.fd(a)
t.end_fill() # 依据轮廓填充
t.pu() # 提笔
t.seth() # 笔的角度为90度
t.fd() # 向前移动25
t.seth() # 转换画笔的角度为0
t.fd()
t.pd()
t.pencolor(,,) # 设置画笔颜色
t.seth()
t.begin_fill()
t.circle() # 画一个半径为5的圆
t.color(,,) # 设置画笔和填充颜色
t.end_fill()
t.pu()
t.seth()
t.fd()
t.pd()
t.pencolor(,,)
t.seth()
t.begin_fill()
t.circle()
t.color(,,)
t.end_fill()
#头
t.color((,,),"pink")
t.pu()
t.seth()
t.fd()
t.seth()
t.fd()
t.pd()
t.begin_fill()
t.seth()
t.circle(,-) # 顺时针画一个半径为300,圆心角为30°的园
t.circle(,-)
t.circle(,-)
t.circle(,-)
t.circle(,-)
t.seth()
t.circle(-,)
t.pu()
t.goto(-,)
t.pd()
t.seth(-)
a=
for i in range():
   if <=i< or <=i<:
       a=a+
       t.lt() #向左转3度
       t.fd(a) #向前走a的步长
   else:
       a=a-
       t.lt()
       t.fd(a)
t.end_fill()
#耳朵
t.color((,,),"pink")
t.pu()
t.seth()
t.fd(-)
t.seth()
t.fd()
t.pd()
t.begin_fill()
t.seth()
t.circle(-,)
t.circle(-,)
t.circle(-,)
t.end_fill()
t.pu()
t.seth()
t.fd(-)
t.seth()
t.fd()
t.pd()
t.begin_fill()
t.seth()
t.circle(-,)
t.circle(-,)
t.circle(-,)
t.end_fill()
#眼睛
t.color((,,),"white")
t.pu()
t.seth()
t.fd(-)
t.seth()
t.fd(-)
t.pd()
t.begin_fill()
t.circle()
t.end_fill()
t.color("black")
t.pu()
t.seth()
t.fd()
t.seth()
t.fd(-)
t.pd()
t.begin_fill()
t.circle()
t.end_fill()
t.color((,,),"white")
t.pu()
t.seth()
t.fd(-)
t.seth()
t.fd()
t.pd()
t.begin_fill()
t.circle()
t.end_fill()
t.color("black")
t.pu()
t.seth()
t.fd()
t.seth()
t.fd(-)
t.pd()
t.begin_fill()
t.circle()
t.end_fill()
#腮
t.color((,,))
t.pu()
t.seth()
t.fd(-)
t.seth()
t.fd()
t.pd()
t.begin_fill()
t.circle()
t.end_fill()
#嘴
t.color(,,)
t.pu()
t.seth()
t.fd()
t.seth()
t.fd(-)
t.pd()
t.seth(-)
t.circle(,)
t.circle(,)
#身体
t.color("red",(,,))
t.pu()
t.seth()
t.fd(-)
t.seth()
t.fd(-)
t.pd()
t.begin_fill()
t.seth(-)
t.circle(,)
t.circle(,)
t.seth()
t.fd()
t.seth()
t.circle(,)
t.circle(,)
t.color((,,),(,,))
t.seth(-)
t.circle(-,)
t.circle(-,)
t.end_fill()
#手
t.color((,,))
t.pu()
t.seth()
t.fd(-)
t.seth()
t.fd(-)
t.pd()
t.seth(-)
t.circle(,)
t.pu()
t.seth()
t.fd()
t.seth()
t.fd()
t.pd()
t.seth(-)
t.circle(-,)
t.pu()
t.seth()
t.fd()
t.seth()
t.fd()
t.pd()
t.seth(-)
t.circle(-,)
t.pu()
t.seth()
t.fd()
t.seth()
t.fd()
t.pd()
t.seth(-)
t.circle(,)
#脚
t.pensize()
t.color((,,))
t.pu()
t.seth()
t.fd(-)
t.seth()
t.fd(-)
t.pd()
t.seth(-)
t.fd()
t.seth(-)
t.color("black")
t.pensize()
t.fd()
t.pensize()
t.color((,,))
t.pu()
t.seth()
t.fd()
t.seth()
t.fd()
t.pd()
t.seth(-)
t.fd()
t.seth(-)
t.color("black")
t.pensize()
t.fd()
#尾巴
t.pensize()
t.color((,,))
t.pu()
t.seth()
t.fd()
t.seth()
t.fd()
t.pd()
t.seth()
t.circle(,)
t.circle(,)
t.circle(,)
           

转载文章出处:

画小猪佩奇之python实现

https://blog.csdn.net/wyisfish/article/details/80599138

用CSS画小猪佩奇,你就是下一个社会人!

https://www.cnblogs.com/qcloud1001/p/9052356.html

使用canvas 代码画小猪佩奇

https://www.cnblogs.com/whatarey/p/8997979.html