每个人心中都有一个暖暖的大白,blingbling的大眼睛~软软的肚子~宽厚的肩膀~善良的心肠~如果可以,我愿意沦陷在大白的肚子里永远不出来,哈哈~毛球要失宠咯~
哈哈哈
每个人都是独立的个体,大白也不例外,仔细观察大白有一个圆圆的头加一对黑溜溜的眼睛,没有腹肌的躯干和一颗裸露的心脏,圆滚滚的肚子两边一对宽厚的臂膀,仔细看还有两个萌萌哒小手指呢,最后一对粗的像大象一样的大腿才能支撑这软软的肚子嘛,哈哈~
定义背景
-
因为大白是白的,所以我们可以定义一个深颜色的背景来突出一下大白,让我们在茫茫屏幕中一眼就能看到它,欧耶~
/*使用了一个渐变色,没有做各个浏览器的兼容性处理*/body {background: linear-gradient(to bottom, #f91818 0%,#ea8181 100%);}
定义画大白的容器
-
定义个div容器,控制大白在屏幕中的整体位置
<!--定义大白的存放容器--><div id="baymax"></div>#baymax {
画大白的头部
-
大白的头部是一个椭圆形的,不用canvas自带的画椭圆的方法最先想到的就是先画一个长方形然后用圆角矩形(border-radius,设置成50%会有圆形的效果)的方法绘制。
-
头部下巴那边有一层灰色的阴影,我们在长方形的下面加一个灰色的底边框就可以了。
-
眼睛也是圆形的可以用同样的方法,将眼睛和嘴巴(那是嘴巴吗?)相对定位在头部相应位置即可。
<!-- 定义头部,包括两个眼睛、嘴 -->
-
大白头部效果.png
画大白的躯干和中间的小心脏
-
大白脖子到肚子之间的躯干比头部大比肚子小,可以想象成一个竖着的椭圆形跟其他部分拼接而成(要有想象力哦,不像画画,肯定是要各种图形拼接的)。
-
心脏就是一个圆形,里面的月牙效果可以用内部阴影做出效果。
<!-- 定义躯干,包括心脏 -->
-
大白躯干效果.png
画大白的肚子腹部,包括 cover(和躯干的连接处)
-
大白的肚子腹部就是比躯干大一圈的椭圆然后移到躯干的中间位置。
-
但是在衔接部分会有边框的影响,我们可以用一个白色的椭圆将衔接部分的边框遮盖住就可以了。
<!-- 定义肚子腹部,包括 cover(和躯干的连接处) -->
-
大白的肚子效果.png
画大白的左右臂,包括一大一小两个手指
-
手臂部分是用一个倾斜的椭圆做成,然后隐藏到躯干后面对应的位置即可。
-
两个小手指也是两个倾斜的小椭圆组合而成,定位到手臂对应的位置即可。
<!-- 定义左臂,包括一大一小两个手指 -->
-
大白手臂效果.png
画大白的左右腿
-
腿的画法就是在矩形的基础上,用border-radius方法在矩形的四边画出不同程度的圆角形成腿的形状就行,然后将腿相对定位到身体对应的位置即可。
<!-- 定义左腿 -->
-
大白腿部效果.png
写在最后的拼图游戏
-
看完整个教程,是不是觉得画一个大白其实就很少的几个知识点:border-radius、position: relative、 z-index、transform: rotate(*deg)、border、box-shadow,剩下的就是靠position和z-index各种定位拼接堆叠,只要想明白了要哪些基本元素,就可以很轻松的拼接成一个萌萌的大白哦~下面我把所有的零部件列举出来,怎么拼接就看自己的想象力咯~哈哈
-
大白分解和最终效果图.png
完整代码
<!DOCTYPE html><html><head>
PS:学习自其它文章,画完是不是特别有成就感呢,哈哈哈哈哈哈~下次画点啥呢~你说我来画?
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
343599877,我们一起学前端!