基于canvas实现的多功能画板

前言

使用CSS可以绘制很多有意思的小动画效果，上一篇学习用JS绘制月日历框，并同时用圆圈圈标示出当日日期。这篇就来用CSS绘制呼呼睡觉的小熊，总的思路就是将小熊拆分成不同部位，依次绘制出来即可。

码上掘金

实现思路

将呼呼睡觉的可爱小熊拆分开，绘制好不同部位再组合一起即可形成完整身体，搭配小动画就比较形象展示呼呼大睡的状态。 先把小熊的大致轮廓绘制出来，头部，口鼻部位，熊耳朵，整个身子

// 绘制身体
.body {width: 300px;height: 150px;background: #594a41;// 设定为褐色left: 228px;border-radius: 50%;bottom: 29px;
}

// 头部
.head {z-index: 10;width: 152px;height: 70px;bottom: 32px;left: 143px;background: #A78A7F; // 头部设定为棕色border-radius: 100%;
} 
1
2
3
4
5
6
7

耳朵的绘制还算比较容易，位置先确定好，形状的高度和相对距离设定

.ears {width: 42px;height: 42px;background: #594a41;border-radius: 100%;left: 220px;top: 60px;box-shadow: 34px -8px 0 0 #594a41
} 
1
2

以上处理完绘制出来的身体整体轮廓效果