本次基于
canvas来手绘一个QQ企鹅。
关于Canvas的教程，可以参看：
番外 #Canvas# - 0000 - 砖心降伏Canvas系列。
现在让我们先观察下企鹅，按照层次划分来组合最终的效果。
选择使用绝对位置
position:absolute来布局各个元素。
使用绝对元素，就意味着很多区域都是
固定长度（px），类似于静态壁纸～
代码中遇到的不会的标签，或者css属性，都可以参看
鱼C速查宝典（
传送门）
拓展：
学好#Web开发必须要收藏的几个页面 | 【课程指南】
企鹅主要划分为头部，身体，围脖，双手，双脚。
代码框架：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="鱼C工作室">
<title>鱼C-QQ</title>
</head>
<body>
<!-- QQ Logo box -->
<div id="qq">
<!-- 头 -->
<div class="head"></div>
<!-- 身体 -->
<div class="body"></div>
<!-- 手 -->
<div class="handWrapper"></div>
<!-- 脚 -->
<div class="footWrapper"></div>
</div>
</body>
</html>
基本框架结构就是这样了。
QQ 对于容器是通过绝对定位来对每个元素布局进行设置的。
在head元素中添加css：
<style>
/*QQ Logo 绘制*/
#qq {
position: relative;
margin: 0 auto;
width: 420px;
height: 400px;
outline: #2ebb96 solid 2px;
}
</style>
[attach]94918[/attach]
骨架出来了，那我们就开始一步步的进行绘制了，先从头开始。
head
绘制 head 前，先对 head 的层次结构划分清楚，依次为：
在head中添加div：
<!-- 头 -->
<div class="head">
<!-- 左眼 -->
<div class="left eye"></div>
<!-- 右眼 -->
<div class="right eye"></div>
<!-- 上嘴唇 -->
<div class="mouthTopContainer"></div>
<!-- 下嘴唇 -->
<div class="mouthBottomContainer"></div>
<!-- 嘴唇上下层次感 -->
<div class="lispContainer"></div>
</div>
通过CSS绘制 head 的轮廓：
/* QQ head */
.head {
position: absolute;
top: 18px;
left: 96px;
width: 234px;
height: 185px;
border: 1px solid #000; /* 通过对border-radius 圆弧的层度来进行钩画 */
border-top-left-radius: 117px 117px;
border-top-right-radius: 117px 117px;
border-bottom-left-radius: 117px 68px;
border-bottom-right-radius: 117px 68px;
}
[attach]94919[/attach]
圆弧设置成 border-bottom-left-radius: 117px 68px;
一般
根据设计图出来后导出转成带有标尺图后，会自动计算出值；
如果没有的话，那就要通过计算了。
然后依次绘制 head 其他结构，继续添加css。
眼睛：/* 眼睛 */
.eye {
position: absolute;
width: 44px;
height: 66px;
border: 1px solid #000;
border-radius: 50% 50%;
}
.left.eye {
left: 62px;
top: 50px;
}
.right.eye {
left: 132px;
top: 50px;
}
[attach]94920[/attach]
嘴：/* 嘴 */
.mouthTopContainer {
position: absolute;
top: 120px;
left: 39px;
width: 158px;
height: 29px;
border: 1px solid #000;
}
.mouthBottomContainer {
position: absolute;
top: 146px;
left: 39px;
width: 158px;
height: 15px;
border: 1px solid #000;
}
[attach]94921[/attach]
到这里基本头的骨架就出来了，画风很粗犷，让我们妙手回春一下～
需要对头的骨架结构的线条进行修饰。
眼睛修饰
在两个眼睛中添加
眼球，右眼还有一个眯眼的表情。
创建新的div：
<!-- 左眼 -->
<div class="left eye">
<!-- 眼球 -->
<div class="innerLeftEye"></div>
</div>
<!-- 右眼 -->
<div class="right eye">
<!-- 眼球 -->
<div class="innerRightEye">
<!-- 月牙眼球两端圆弧修饰 -->
<div class="fix"></div>
</div>
</div>
添加新的样式：
.innerLeftEye {
position: absolute;
top: 20px;
left: 20px;
width: 18px;
height: 24px;
border-radius: 50%;
border: 1px solid #000;
}
.innerLeftEye::after {
content: "";
position: absolute;
top: 6px;
left: 9px;
width: 6px;
height: 8px;
border: 1px solid #000;
border-radius: 50%;
}
.innerRightEye {
position: absolute;
top: 20px;
left: 8px; /* 月牙眼球外轮廓 */
width: 18px;
height: 24px;
border: 1px solid #000;
border-top-left-radius: 50% 90%;
border-top-right-radius: 50% 90%;
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
}
.innerRightEye::after {
content: "";
position: absolute;
bottom: -1px;
left: 4px; /* 月牙眼球内部轮廓 */
width: 10px;
height: 13px;
border: 1px solid #000;
border-top-left-radius: 50% 100%;
border-top-right-radius: 35% 80%;
}
.fix {
position: absolute;
top: 17px;
width: 4px;
height: 4px;
border: 1px solid #000;
border-radius: 50%;
}
.fix:after {
content: "";
position: absolute;
top: 0;
left: 14px;
width: 4px;
height: 4px;
border: 1px solid #000;
border-radius: 50%;
}
[attach]94923[/attach]
稍后利用图形重叠，进行填色。
继续完善嘴部。
嘴的修饰
添加上下嘴唇，咬合的层次感：
<!-- 上嘴唇 -->
<div class="mouthTopContainer">
<div class="mouthTop"></div>
</div>
<!-- 下嘴唇-->
<div class="mouthBottomContainer">
<div class="mouthBottom"></div>
</div>
<!-- 嘴唇上下层次感-咬合部位 -->
<div class="lispContainer">
<div class="lips">
<div class="lipShadow left"></div>
<div class="lipShadow right"></div>
</div>
</div>
去掉上下嘴唇的边界线，并添加样式：
.mouthTopContainer { /* 定位 */
position: absolute;
top: 120px;
left: 39px;
width: 158px;
height: 29px;
overflow: hidden; /* 隐藏超出部分 */
}
.mouthTop { /* 上嘴唇轮廓 */
position: absolute;
top: 0;
left: 0;
width: 158px;
height: 34px;
border: 1px solid #000;
border-top-left-radius: 45% 34px;
border-top-right-radius: 45% 34px;
}
.mouthBottomContainer {
position: absolute;
top: 146px;
left: 39px;
width: 158px;
height: 15px;
overflow: hidden; /* 隐藏超出部分 */
}
.mouthBottom {
position: absolute;
top: -4px;
left: 0;
width: 158px;
height: 24px;
border: 1px solid #000;
border-top: none;
border-bottom-left-radius: 45% 24px;
border-bottom-right-radius: 45% 24px;
}
/* 嘴唇上下层次感-咬合部位 */
.lispContainer { /* 定位 */
position: absolute;
top: 146px;
left: 60px;
width: 116px;
height: 24px;
}
.lips {
position: absolute;
top: 0;
left: 0;
width: 116px;
height: 24px;
border: 1px solid #FFA600;
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
}
[attach]94924[/attach]
基本 head 轮廓就是这样了。
现在把右眼眼球部分上个色，来进行层叠覆盖隐藏。
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-6-15 14:17:47
置顶卡
千斤顶
显身卡
发表于 2018-6-15 18:30:45
发表于 2018-7-20 19:01:34
惊呆了