设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 老司机手把手画#QQ企鹅！
返回列表 发新帖
查看: 2013|回复: 5

[奇技淫巧] 老司机手把手画#QQ企鹅！

[复制链接]
不二如是
发表于 2018-6-15 14:17:47 | 显示全部楼层 |阅读模式
本次基于canvas来手绘一个QQ企鹅。

关于Canvas的教程，可以参看：番外 #Canvas# - 0000 - 砖心降伏Canvas系列。

现在让我们先观察下企鹅，按照层次划分来组合最终的效果。

选择使用绝对位置position:absolute来布局各个元素。

使用绝对元素，就意味着很多区域都是固定长度（px），类似于静态壁纸～


                               
登录/注册后可看大图


代码中遇到的不会的标签，或者css属性，都可以参看鱼C速查宝典（传送门）
拓展：学好#Web开发必须要收藏的几个页面 | 【课程指南】

企鹅主要划分为头部，身体，围脖，双手，双脚。

代码框架：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
  7.     <meta name="description" content="《零基础入门学习Web开发》案例演示">
  8.     <meta name="author" content="鱼C工作室">
  9.     <title>鱼C-QQ</title>
  10. </head>
  11. <body>
  12. <!-- QQ Logo box -->
  13. <div id="qq">
  14.     <!-- 头 -->
  15.     <div class="head"></div>
  16.     <!-- 身体 -->
  17.     <div class="body"></div>
  18.     <!-- 手 -->
  19.     <div class="handWrapper"></div>
  20.     <!-- 脚 -->
  21.     <div class="footWrapper"></div>
  22. </div>
  23. </body>
  24. </html>
复制代码


基本框架结构就是这样了。

QQ 对于容器是通过绝对定位来对每个元素布局进行设置的。

在head元素中添加css：
  1. <style>
  2.         /*QQ Logo 绘制*/
  3.         #qq {
  4.             position: relative;
  5.             margin: 0 auto;
  6.             width: 420px;
  7.             height: 400px;
  8.           outline: #2ebb96 solid 2px;
  9.         }
  10.     </style>
复制代码

[attach]94918[/attach]

骨架出来了，那我们就开始一步步的进行绘制了，先从头开始。



head

绘制 head 前，先对 head 的层次结构划分清楚，依次为：
左眼、右眼、上嘴唇、下嘴唇、嘴唇的层次感体现。


在head中添加div：
  1. <!-- 头 -->
  2.     <div class="head">
  3.         <!-- 左眼 -->
  4.         <div class="left eye"></div>
  5.         <!-- 右眼 -->
  6.         <div class="right eye"></div>
  7.         <!-- 上嘴唇 -->
  8.         <div class="mouthTopContainer"></div>
  9.         <!-- 下嘴唇 -->
  10.         <div class="mouthBottomContainer"></div>
  11.         <!-- 嘴唇上下层次感 -->
  12.         <div class="lispContainer"></div>
  13.     </div>
复制代码


通过CSS绘制 head 的轮廓：
  1. /* QQ head */
  2.         .head {
  3.             position: absolute;
  4.             top: 18px;
  5.             left: 96px;
  6.             width: 234px;
  7.             height: 185px;
  8.             border: 1px solid #000; /* 通过对border-radius 圆弧的层度来进行钩画 */
  9.             border-top-left-radius: 117px 117px;
  10.             border-top-right-radius: 117px 117px;
  11.             border-bottom-left-radius: 117px 68px;
  12.             border-bottom-right-radius: 117px 68px;
  13.         }
复制代码

[attach]94919[/attach]


圆弧设置成 border-bottom-left-radius: 117px 68px;

一般根据设计图出来后导出转成带有标尺图后，会自动计算出值；

如果没有的话，那就要通过计算了。

然后依次绘制 head 其他结构，继续添加css。

眼睛：
  1. /* 眼睛 */
  2.         .eye {
  3.             position: absolute;
  4.             width: 44px;
  5.             height: 66px;
  6.             border: 1px solid #000;
  7.             border-radius: 50% 50%;
  8.         }

  10.         .left.eye {
  11.             left: 62px;
  12.             top: 50px;
  13.         }

  15.         .right.eye {
  16.             left: 132px;
  17.             top: 50px;
  18.         }
复制代码

[attach]94920[/attach]


嘴：
  1. /* 嘴 */
  2.         .mouthTopContainer {
  3.             position: absolute;
  4.             top: 120px;
  5.             left: 39px;
  6.             width: 158px;
  7.             height: 29px;
  8.             border: 1px solid #000;
  9.         }

  11.         .mouthBottomContainer {
  12.             position: absolute;
  13.             top: 146px;
  14.             left: 39px;
  15.             width: 158px;
  16.             height: 15px;
  17.             border: 1px solid #000;
  18.         }
复制代码

[attach]94921[/attach]


到这里基本头的骨架就出来了，画风很粗犷，让我们妙手回春一下～

需要对头的骨架结构的线条进行修饰。



眼睛修饰

在两个眼睛中添加眼球，右眼还有一个眯眼的表情。

创建新的div：
  1. <!-- 左眼 -->
  2.         <div class="left eye">
  3.             <!-- 眼球 -->
  4.             <div class="innerLeftEye"></div>
  5.         </div>
  6.         <!-- 右眼 -->
  7.         <div class="right eye">
  8.             <!-- 眼球 -->
  9.             <div class="innerRightEye">
  10.                 <!-- 月牙眼球两端圆弧修饰 -->
  11.                 <div class="fix"></div>
  12.             </div>
  13.         </div>
复制代码


添加新的样式：
  1. .innerLeftEye {
  2.             position: absolute;
  3.             top: 20px;
  4.             left: 20px;
  5.             width: 18px;
  6.             height: 24px;
  7.             border-radius: 50%;
  8.             border: 1px solid #000;
  9.         }

  11.         .innerLeftEye::after {
  12.             content: "";
  13.             position: absolute;
  14.             top: 6px;
  15.             left: 9px;
  16.             width: 6px;
  17.             height: 8px;
  18.             border: 1px solid #000;
  19.             border-radius: 50%;
  20.         }

  22.         .innerRightEye {
  23.             position: absolute;
  24.             top: 20px;
  25.             left: 8px; /* 月牙眼球外轮廓 */
  26.             width: 18px;
  27.             height: 24px;
  28.             border: 1px solid #000;
  29.             border-top-left-radius: 50% 90%;
  30.             border-top-right-radius: 50% 90%;
  31.             border-bottom-left-radius: 50% 10%;
  32.             border-bottom-right-radius: 50% 10%;
  33.         }

  35.         .innerRightEye::after {
  36.             content: "";
  37.             position: absolute;
  38.             bottom: -1px;
  39.             left: 4px; /* 月牙眼球内部轮廓 */
  40.             width: 10px;
  41.             height: 13px;
  42.             border: 1px solid #000;
  43.             border-top-left-radius: 50% 100%;
  44.             border-top-right-radius: 35% 80%;
  45.         }

  47.         .fix {
  48.             position: absolute;
  49.             top: 17px;
  50.             width: 4px;
  51.             height: 4px;
  52.             border: 1px solid #000;
  53.             border-radius: 50%;
  54.         }

  56.         .fix:after {
  57.             content: "";
  58.             position: absolute;
  59.             top: 0;
  60.             left: 14px;
  61.             width: 4px;
  62.             height: 4px;
  63.             border: 1px solid #000;
  64.             border-radius: 50%;
  65.         }
复制代码

[attach]94923[/attach]


稍后利用图形重叠，进行填色。

继续完善嘴部。



嘴的修饰

添加上下嘴唇，咬合的层次感：
  1. <!-- 上嘴唇 -->
  2.         <div class="mouthTopContainer">
  3.             <div class="mouthTop"></div>
  4.         </div>
  5.         <!-- 下嘴唇-->
  6.         <div class="mouthBottomContainer">
  7.             <div class="mouthBottom"></div>
  8.         </div>
  9.         <!-- 嘴唇上下层次感-咬合部位 -->
  10.         <div class="lispContainer">
  11.             <div class="lips">
  12.                 <div class="lipShadow left"></div>
  13.                 <div class="lipShadow right"></div>
  14.             </div>
  15.         </div>
复制代码


去掉上下嘴唇的边界线，并添加样式：
  1. .mouthTopContainer { /* 定位 */
  2.             position: absolute;
  3.             top: 120px;
  4.             left: 39px;
  5.             width: 158px;
  6.             height: 29px;
  7.             overflow: hidden; /* 隐藏超出部分 */
  8.         }

  10.         .mouthTop { /* 上嘴唇轮廓 */
  11.             position: absolute;
  12.             top: 0;
  13.             left: 0;
  14.             width: 158px;
  15.             height: 34px;
  16.             border: 1px solid #000;
  17.             border-top-left-radius: 45% 34px;
  18.             border-top-right-radius: 45% 34px;
  19.         }

  21.         .mouthBottomContainer {
  22.             position: absolute;
  23.             top: 146px;
  24.             left: 39px;
  25.             width: 158px;
  26.             height: 15px;
  27.             overflow: hidden; /* 隐藏超出部分 */
  28.         }

  30.         .mouthBottom {
  31.             position: absolute;
  32.             top: -4px;
  33.             left: 0;
  34.             width: 158px;
  35.             height: 24px;
  36.             border: 1px solid #000;
  37.             border-top: none;
  38.             border-bottom-left-radius: 45% 24px;
  39.             border-bottom-right-radius: 45% 24px;
  40.         }

  42.         /* 嘴唇上下层次感-咬合部位 */
  43.         .lispContainer { /* 定位 */
  44.             position: absolute;
  45.             top: 146px;
  46.             left: 60px;
  47.             width: 116px;
  48.             height: 24px;
  49.         }

  51.         .lips {
  52.             position: absolute;
  53.             top: 0;
  54.             left: 0;
  55.             width: 116px;
  56.             height: 24px;
  57.             border: 1px solid #FFA600;
  58.             border-bottom-left-radius: 50% 100%;
  59.             border-bottom-right-radius: 50% 100%;
  60.         }
复制代码

[attach]94924[/attach]


基本 head 轮廓就是这样了。

现在把右眼眼球部分上个色，来进行层叠覆盖隐藏。
购买主题 已有 1 人购买  本主题需向作者支付 33 鱼币 才能浏览
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

隨鈊乄鎍慾
发表于 2018-6-15 18:30:45 | 显示全部楼层
哈哈，还有沙发坐~~~
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

木瓜cc
发表于 2018-7-20 19:01:34 | 显示全部楼层
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

船到桥头自然沉
发表于 2018-9-5 23:48:37 | 显示全部楼层
惊呆了
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

幽梦三影
发表于 2018-9-7 21:57:51 | 显示全部楼层
太猛了
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

无Python难活
发表于 2019-12-21 16:06:20 From FishC Mobile | 显示全部楼层
牛批
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-20 09:23

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表