html5是一门很强大的语言，想在非常流行，用他画的图都显得非常的漂亮还看
效果截图：
程序：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>html5 - 小猫咪</title>
<link rel="stylesheet" type="text/css" href="css/common/reset.css"/>
<style>
body{text-align: center;}
.wrapper{ height:800px;}
canvas{ margin-top: 123px;}
</style>
</head>
<body>
<p class="wrapper">
<canvas width="600" height="554"></canvas>
</p>
<script>
var cvs=document.queryselector("canvas");
var g=cvs.getcontext("2d");
//尾巴
g.strokestyle="#33190c";
g.fillstyle="#ffffd9";
g.linewidth=6;
g.beginpath();
g.moveto(433,458);
g.lineto(477,438);
g.beziercurveto(492,433,496,453,484,463);
g.lineto(433,494);
g.fill();
g.stroke();
//身体
g.beginpath();
g.moveto(255,392);
g.lineto(255,526);
g.beziercurveto(256,555,282,557,293,530);
g.lineto(383,530);
g.beziercurveto(392,557,419,558,428,526);
g.quadraticcurveto(434,523,430,393);
g.closepath();
g.fill();
g.stroke();
//肚白
g.fillstyle="#fff";
g.beginpath();
g.moveto(317,501);
g.quadraticcurveto(345,504,363,500);
g.quadraticcurveto(386,492,389,480);
g.quadraticcurveto(393,469,396,437);
g.closepath();
g.fill();
//肚子蓝点
g.fillstyle="#e5f8ef";
g.beginpath();
g.moveto(428,459);
g.beziercurveto(407,456,405,479,421,482);
g.beziercurveto(393,482,394,507,427,511);
g.quadraticcurveto(429,485,428,459);
g.closepath();
g.fill();
//耳朵(左边)
g.strokestyle="#33190c";
g.fillstyle="#ffffd9";
g.linewidth=4;
g.beginpath();
g.moveto(106,79);
g.quadraticcurveto(114,4,209,14);
g.fill();
g.stroke();
//耳朵(右边)
g.beginpath();
g.linewidth=5;
g.moveto(376,14);
g.quadraticcurveto(431,13,446,15);
g.quadraticcurveto(488,20,498,48);
g.quadraticcurveto(508,75,512,110);
g.fill();
g.stroke();
g.beginpath();
g.linewidth=8;
g.moveto(470,65);
g.lineto(483,27);
g.stroke();
g.beginpath();
g.fillstyle="#fecce5";
g.moveto(473,65);
g.lineto(483,30);
g.beziercurveto(502,46,496,60,512,110);
g.closepath();
g.fill();
//头
g.linewidth=10;
g.beginpath();
g.strokestyle="#33190c";
g.fillstyle="#ffffd9";
g.moveto(280,6);
g.beziercurveto(476,0,535,154,541,166);
g.lineto(546,180);
g.beziercurveto(584,304,530,368,432,392);
g.quadraticcurveto(210,460,90,372);
g.quadraticcurveto(38,324,34,314);
g.quadraticcurveto(1,268,38,174);
g.quadraticcurveto(128,8,280,6);
g.closepath();
g.fill();
g.stroke();
//脸白
g.fillstyle="#fff";
g.beginpath();
g.moveto(29,294);
g.quadraticcurveto(57,339,99,371);
g.quadraticcurveto(272,404,427,390);
g.beziercurveto(500,371,567,330,549,216);
g.beziercurveto(560,298,518,360,427,378);
g.quadraticcurveto(272,404,99,364);
g.quadraticcurveto(55,334,29,294);
g.closepath();
g.fill();
//胡须(左边)
g.strokestyle="#33190c";
g.linewidth=7;
g.beginpath();
g.moveto(6,212);
g.lineto(23,212);
g.stroke();
g.moveto(7,211);
g.quadraticcurveto(5,212,7,213);
g.stroke();
g.beginpath();
g.moveto(2,246);
g.lineto(15,246);
g.stroke();
g.moveto(6,245);
g.quadraticcurveto(1,246,6,247);
g.stroke();
g.beginpath();
g.moveto(6,284);
g.lineto(17,281);
g.stroke();
g.moveto(9,282);
g.quadraticcurveto(4,287,6,282);
g.stroke();
//胡须(右边边)
g.linewidth=6;
g.beginpath();
g.moveto(529,233);
g.lineto(596,246);
g.stroke();
g.moveto(530,233);
g.quadraticcurveto(528,233,530,234);
g.stroke();
g.moveto(596,246);
g.quadraticcurveto(597,246,596,246);
g.stroke();
g.beginpath();
g.moveto(525,263);
g.lineto(587,290);
g.stroke();
g.moveto(526,263);
g.quadraticcurveto(524,263,527,264);
g.stroke();
g.moveto(587,290);
g.quadraticcurveto(589,291,587,290);
g.stroke();
g.beginpath();
g.moveto(523,296);
g.lineto(581,331);
g.stroke();
g.moveto(524,298);
g.quadraticcurveto(522,294,524,297);
g.stroke();
g.moveto(581,331);
g.quadraticcurveto(583,332,581,331);
g.stroke();
//眉毛(左边)
g.linewidth=5;
g.beginpath();
g.moveto(163,40);
g.lineto(182,42);
g.moveto(182,42);
g.quadraticcurveto(185,42,180,42);
g.stroke();
//眉毛(右边)
g.beginpath();
g.moveto(374,54);
g.quadraticcurveto(386,43,396,57);
g.moveto(375,54);
g.quadraticcurveto(372,56,376,53);
g.moveto(395,56);
g.quadraticcurveto(397,58,395,56);
g.stroke();
//额头蓝点
g.fillstyle="#e5f8ef";
g.beginpath();
g.moveto(190,30);
g.beziercurveto(180,57,216,65,218,20);
g.quadraticcurveto(203,23,190,30);
g.closepath();
g.fill();
g.beginpath();
g.moveto(239,15);
g.beziercurveto(233,70,280,60,278,11);
g.quadraticcurveto(257,11,239,15);
g.closepath();
g.fill();
g.beginpath();
g.moveto(304,11);
g.beziercurveto(285,48,329,74,339,15);
g.quadraticcurveto(322,11,304,11);
g.closepath();
g.fill();
g.beginpath();
g.moveto(365,20);
g.beziercurveto(354,47,380,53,389,28);
g.quadraticcurveto(378,23,366,20);
g.closepath();
g.fill();
//腮红(左边)
g.fillstyle="#ffcce6";
g.beginpath();
g.moveto(110,199);
g.quadraticcurveto(73,179,47,198);
g.beziercurveto(41,204,43,211,47,215);
g.quadraticcurveto(73,235,120,212);
g.closepath();
g.fill();
//腮红(右边)
g.beginpath();
g.moveto(428,200);
g.quadraticcurveto(470,186,507,210);
g.beziercurveto(519,218,514,240,497,244);
g.quadraticcurveto(454,256,420,227);
g.closepath();
g.fill();
//害羞(左边)
g.strokestyle="#361909";
g.linewidth=6;
g.beginpath();
g.moveto(71,205);
g.lineto(65,212);
g.moveto(71,205);
g.beziercurveto(75,200,74,202,71,205);
g.moveto(66,211);
g.beziercurveto(63,213,62,217,66,210);
g.moveto(88,205);
g.lineto(82,212);
g.moveto(88,205);
g.beziercurveto(90,202,91,202,88,205);
g.moveto(82,212);
g.beziercurveto(80,215,78,216,82,212);
g.stroke();
//害羞(右边)
g.beginpath();
g.moveto(448,218);
g.lineto(443,224);
g.moveto(448,218);
g.beziercurveto(452,213,454,215,444,224);
g.moveto(443,224);
g.beziercurveto(441,225,439,230,444,224);
g.moveto(466,218);
g.lineto(460,225);
g.moveto(466,219)
g.beziercurveto(468,215,469,216,465,219);
g.moveto(460,225);
g.beziercurveto(455,230,455,231,460,225);
g.moveto(482,220);
g.lineto(475,228);
g.moveto(482,221);
g.beziercurveto(484,216,484,219,481,221);
g.moveto(476,227);
g.beziercurveto(472,231,472,231,476,227);
g.stroke();
//眼睛(左边)
g.fillstyle="#35190d";
g.beginpath();
g.moveto(129,140);
g.beziercurveto(206,118,215,204,172,226);
g.beziercurveto(92,249,85,165,129,140);
g.closepath();
g.fill();
//眼睛(右边)
g.beginpath();
g.moveto(332,154);
g.beziercurveto(421,108,462,208,407,240);
g.beziercurveto(357,279,264,214,332,154);
g.closepath();
g.fill();
//睫毛(左边)
g.strokestyle="#35190d";
g.linewidth=6;
g.beginpath();
g.moveto(129,146);
g.lineto(129,131);
g.stroke();
//睫毛(右边)
g.beginpath();
g.moveto(334,156);
g.lineto(328,146);
g.stroke();
//眼珠(左边)
g.fillstyle="#fff";
g.beginpath();
g.moveto(177,151);
g.beziercurveto(190,152,183,166,177,164);
g.beziercurveto(168,164,168,152,177,151);
g.closepath();
g.fill();
//眼珠(右边)
g.beginpath();
g.moveto(393,154);
g.beziercurveto(406,155,402,171,393,169);
g.beziercurveto(384,169,382,155,393,154);
g.closepath();
g.fill();
//鼻子
g.fillstyle="#35190e";
g.beginpath();
g.moveto(237,220);
g.beziercurveto(237,209,254,209,254,220);
g.beziercurveto(254,231,238,231,237,220);
g.closepath();
g.fill();
g.strokestyle="#35190e";
g.linewidth=4;
g.beginpath();
g.moveto(218,229);
g.beziercurveto(222,241,239,243,245,226);
g.moveto(219,230);
g.beziercurveto(217,228,218,228,219,230);
g.moveto(245,226);
g.beziercurveto(254,245,279,244,285,234);
g.moveto(285,234);
g.beziercurveto(286,232,287,232,285,234);
g.stroke();
//爱心
g.strokestyle="#33190c";
g.fillstyle="#fe0000";
g.linewidth=10;
g.beginpath();
g.moveto(98,376);
g.beziercurveto(70,301,156,194,246,303);
g.beziercurveto(403,197,476,345,424,402);
g.quadraticcurveto(375,475,260,528);
g.quadraticcurveto(247,536,225,526);
g.quadraticcurveto(130,463,98,376);
g.closepath();
g.fill();
g.stroke();
//爱心中心
g.fillstyle="#ff334c";
g.beginpath();
g.moveto(109,372);
g.beziercurveto(68,240,214,226,236,326);
g.quadraticcurveto(297,250,384,278);
g.quadraticcurveto(408,288,404,316);
g.quadraticcurveto(380,416,263,469);
g.beziercurveto(241,480,220,470,202,464);
g.quadraticcurveto(118,416,109,372);
g.closepath();
g.fill();
//白点
g.fillstyle="#fff";
g.beginpath();
g.moveto(129,273);
g.quadraticcurveto(142,260,155,273);
g.beziercurveto(151,286,125,278,129,273);
g.closepath();
g.fill();
g.beginpath();
g.moveto(292,293);
g.beziercurveto(296,283,333,271,351,278);
g.beziercurveto(350,292,300,302,292,293);
g.closepath();
g.fill();
//手(左边)
g.strokestyle="#33190c";
g.fillstyle="#fff";
g.linewidth=6;
g.beginpath();
g.moveto(98,377);
g.beziercurveto(137,367,128,417,113,415);
g.beziercurveto(97,418,74,390,98,377);
g.closepath();
g.fill();
g.stroke();
//手(右边)
g.beginpath();
g.moveto(390,434);
g.beziercurveto(358,407,392,366,427,388);
g.quadraticcurveto(416,409,393,435);
g.closepath();
g.fill();
g.stroke();
</script>
</body>
</html>
以上就是html5的应用-画一个可爱的小猫咪效果图的详细内容。