一、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