小伙伴们，学习了canvas绘图技术，接下来让我们动手实现一个可爱的hello kitty猫吧！
作业描述
一、语言和环境
1、 实现语言
HTML5（canvas）、CSS、JavaScript
2、 环境要求及开发工具
建议 Sublime text
二、网页整体要求
1、 要求猫咪形态美观，与提供的页面效果图、结构保持一致
2、 要求HTML代码书写、命名符合规范，在代码中添加必要注释
3、 网页文件夹管理，CSS、JS等资料独立文件夹
三、具体要求
1、 猫咪分为以下几部分：头部、身体、尾巴、爱心
2、 使用HTML5标签中的canvas画布标签结合JavaScript完成绘制
3、 颜色表
4、 思路分析
| 1 | 开发准备 | 首先，创建一个div元素，设定class，给这个div元素设置宽度和高度 | |
| 创建好的div元素中，再创建一个canvas标签 | |||
| 在JS文件中获取canvas元素 | |||
| 创建2d绘图环境 | |||
| 2 | 尾巴 | 尾巴第一条线 | 起始点(433, 458) |
| 终止点(477, 438) | |||
| 尾巴圆角及剩余部分 | 贝赛尔曲线绘制点(492, 433, 496, 453, 484, 463) | ||
| 终止点(433, 494) | |||
| 提示： xxx.bezierCurveTo(492, 433, 496, 453, 484, 463); xxx.lineTo(433, 494); | |||
| 3 | 身体 | 左边身体 | 起始点(255, 392) |
| 终止点(255, 526) | |||
| 左脚 | 贝塞尔曲线绘制点(256, 555, 282, 557, 293, 530) | ||
| 终止点(383, 530) | |||
| 右脚和右身 | 贝塞尔曲线绘制点(392, 557, 419, 558, 428, 526) | ||
| 二次贝塞尔曲线绘制点(434, 523, 430, 393) | |||
| 提示：quadraticCurveTo() 方法为当前路径添加一条二次二次贝塞尔曲线，例如xxx.quadraticCurveTo(434, 523, 430, 393); | |||
| 4 | 耳朵 | 左耳 | 设定绘制线条宽度为4 |
| 起始点(106, 79) | |||
| 二次贝塞尔曲线绘制点(114, 4, 209, 14) | |||
| 右耳 | 设定绘制线条宽度为5 | ||
| 起始点(376, 14) | |||
| 二次贝塞尔曲线绘制点(431, 13, 446, 15) | |||
| 二次贝塞尔曲线绘制点(488, 20, 498, 48) | |||
| 二次贝塞尔曲线绘制点(508, 75, 512, 110) | |||
| 5 | 头 | 头 | 起始点(280, 6) |
| 贝塞尔曲线绘制点(476, 0, 535, 154, 541, 166) | |||
| 终止点(546, 180) | |||
| 贝塞尔曲线绘制点(584, 304, 530, 368, 432, 392) | |||
| 二次贝塞尔曲线绘制点(210, 460, 90, 372) | |||
| 二次贝塞尔曲线绘制点(38, 324, 34, 314) | |||
| 二次贝塞尔曲线绘制点(1, 268, 38, 174) | |||
| 二次贝塞尔曲线绘制点(128, 8, 280, 6) | |||
| 6 | 胡须 | 左边三根胡须 | 起始点(6, 212) |
| 终止点(23, 212) | |||
| 起始点(2, 246) | |||
| 终止点(15, 246) | |||
| 起始点(6, 284) | |||
| 终止点(17, 281) | |||
| 右边三根胡须 | 起始点(529, 233) | ||
| 终止点(596, 246) | |||
| 起始点(525, 263) | |||
| 终止点(587, 290) | |||
| 起始点(523, 296) | |||
| 终止点(581, 331) | |||
| 7 | 眉毛 | 左边眉毛 | 起始点(163, 40) |
| 终止点(182, 42) | |||
| 右边眉毛 | 起始点(374, 54) | ||
| 终止点(395, 56) | |||
| 8 | 害羞斜杠 | 左脸害羞斜杠 | 起始点(71, 205) |
| 终止点(65, 212) | |||
| 起始点(88, 205) | |||
| 终止点(82, 212) | |||
| 右脸害羞斜杠 | 起始点(448, 218) | ||
| 终止点(443, 224) | |||
| 起始点(466, 218) | |||
| 终止点(460, 225) | |||
| 起始点(482, 220) | |||
| 终止点(475, 228) | |||
| 9 | 眼睛 | 左眼 | 起始点(129, 140) |
| 贝塞尔曲线绘制点(206, 118, 215, 204, 172, 226) | |||
| 贝塞尔曲线绘制点(92, 249, 85, 165, 129, 140) | |||
| 右眼 | 起始点(332, 154) | ||
| 贝塞尔曲线绘制点(421, 108, 462, 208, 407, 240) | |||
| 贝塞尔曲线绘制点(357, 279, 264, 214, 332, 154) | |||
| 10 | 眼珠 | 左眼珠 | 起始点(177, 151) |
| 贝塞尔曲线绘制点(190, 152, 183, 166, 177, 164) | |||
| 贝塞尔曲线绘制点(168, 164, 168, 152, 177, 151) | |||
| 右眼珠 | 起始点(393, 154) | ||
| 贝塞尔曲线绘制点(406, 155, 402, 171, 393, 169) | |||
| 贝塞尔曲线绘制点(384, 169, 382, 155, 393, 154) | |||
| 11 | 鼻子 | 圆点 | 起始点(237, 220) |
| 贝塞尔曲线绘制点(237, 209, 254, 209, 254, 220) | |||
| 贝塞尔曲线绘制点(254, 231, 238, 231, 237, 220) | |||
| 弧线 | 起始点(218, 229) | ||
| 贝塞尔曲线绘制点(222, 241, 239, 243, 245, 226) | |||
| 贝塞尔曲线绘制点(254, 245, 279, 244, 285, 234) | |||
| 12 | 爱心 | 爱心 | 起始点(98, 376) |
| 贝塞尔曲线绘制点(70, 301, 156, 194, 246, 303) | |||
| 贝塞尔曲线绘制点(403, 197, 476, 345, 424, 402) | |||
| 二次贝塞尔曲线绘制点(375, 475, 260, 528) | |||
| 二次贝塞尔曲线绘制点(247, 536, 225, 526) | |||
| 二次贝塞尔曲线绘制点(130, 463, 98, 376) | |||
| 13 | 手 | 左手 | 起始点(98, 377) |
| 贝塞尔曲线绘制点(137, 367, 128, 417, 113, 415) | |||
| 贝塞尔曲线绘制点(97, 418, 74, 390, 98, 377) | |||
| 右手 | 起始点(390, 434) | ||
| 贝塞尔曲线绘制点(358, 407, 392, 366, 427, 388) | |||
| 二次贝塞尔曲线绘制点(416, 409, 393, 435) | |||
| 注意！！！ （1）绘制顺序为：尾巴——身体——耳朵——头——胡须——眉毛——害羞斜杠——眼睛——眼珠——鼻子——爱心——手 （2）以上表格为主要实现思路以及绘制点，线条颜色、填充颜色等需自行设置并完成（可参考给出的颜色值） | |||
评分标准是什么？
头部【50分】
* 脸、耳朵有边框线
* 脸型与效果图保持一致
* 两只耳朵显示位置与效果图保持一致
* 眉毛显示位置与效果图保持一致
* 两只眼睛由眼脸和眼球组成，眼球是白色圆点，展示形态与效果图保持一致
* 鼻子由一个圆点与两段弧线组成
* 两侧脸颊各具有三根胡须
* 左脸有两根害羞的线，右脸有三根害羞的线
身体【28分】
* 身体、手、脚有边框线
* 身体有一部分被红心遮挡
* 两只手在红心边缘显示，呈现抱红心状态
* 显示两只脚
尾巴【7分】
* 尾巴有边框线
* 尾巴与效果图保持一致，在身体的右侧显示
爱心【15分】
* 爱心有外边框
* 爱心底色是红色