HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 4480|回复: 2

[笔记] HTML5 canvas 原创“小猫咪”

[复制链接]
  • TA的每日心情

    2017-4-19 00:15
  • 签到天数: 80 天

    [LV.6]常住居民II

    发表于 2016-2-16 11:19:05 | 显示全部楼层 |阅读模式
    本帖最后由 轻微生活网 于 2016-2-16 11:20 编辑

    前几天看了大神的 “ 孙悟空 ”,被萌死了,忍不住自己也来一只 “ 小猫咪 ”
    h5canvasmoe.png

    源码阅读:
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.         <meta charset="utf-8">
    5.         <title>Html5 - 原创小猫咪</title>
    6.         <link rel="stylesheet" type="text/css" href="css/common/reset.css"/>
    7.         <style>
    8.                 body{text-align: center;}
    9.                 .wrapper{ height:800px;}
    10.                 canvas{ margin-top: 123px;}
    11.         </style>
    12. </head>
    13. <body>
    14.         <div class="wrapper">
    15.                 <canvas width="600" height="554"></canvas>
    16.         </div>

    17.         <script>
    18.                 var cvs=document.querySelector("canvas");
    19.                 var g=cvs.getContext("2d");
    20.                
    21.                 //尾巴
    22.                 g.strokeStyle="#33190c";
    23.                 g.fillStyle="#ffffd9";
    24.                 g.lineWidth=6;
    25.                 g.beginPath();
    26.                   g.moveTo(433,458);
    27.                   g.lineTo(477,438);
    28.                   g.bezierCurveTo(492,433,496,453,484,463);
    29.                   g.lineTo(433,494);
    30.                 g.fill();
    31.                 g.stroke();

    32.                 //身体
    33.                 g.beginPath();
    34.                   g.moveTo(255,392);
    35.                   g.lineTo(255,526);
    36.                   g.bezierCurveTo(256,555,282,557,293,530);
    37.                   g.lineTo(383,530);
    38.                   g.bezierCurveTo(392,557,419,558,428,526);
    39.                   g.quadraticCurveTo(434,523,430,393);
    40.                 g.closePath();
    41.                 g.fill();
    42.                 g.stroke();
    43.                 //肚白
    44.                 g.fillStyle="#fff";
    45.                 g.beginPath();
    46.                   g.moveTo(317,501);
    47.                   g.quadraticCurveTo(345,504,363,500);
    48.                   g.quadraticCurveTo(386,492,389,480);
    49.                   g.quadraticCurveTo(393,469,396,437);
    50.             g.closePath();
    51.             g.fill();
    52.             //肚子蓝点
    53.             g.fillStyle="#e5f8ef";
    54.             g.beginPath();
    55.               g.moveTo(428,459);
    56.               g.bezierCurveTo(407,456,405,479,421,482);
    57.               g.bezierCurveTo(393,482,394,507,427,511);
    58.               g.quadraticCurveTo(429,485,428,459);
    59.             g.closePath();
    60.             g.fill();

    61.                 //耳朵(左边)
    62.                 g.strokeStyle="#33190c";
    63.                 g.fillStyle="#ffffd9";
    64.                 g.lineWidth=4;
    65.                 g.beginPath();
    66.                   g.moveTo(106,79);
    67.                   g.quadraticCurveTo(114,4,209,14);
    68.                 g.fill();
    69.                 g.stroke();
    70.                 //耳朵(右边)
    71.                 g.beginPath();
    72.                   g.lineWidth=5;
    73.                   g.moveTo(376,14);
    74.                   g.quadraticCurveTo(431,13,446,15);
    75.                   g.quadraticCurveTo(488,20,498,48);
    76.                   g.quadraticCurveTo(508,75,512,110);
    77.                 g.fill();
    78.                 g.stroke();

    79.                 g.beginPath();
    80.                   g.lineWidth=8;
    81.                   g.moveTo(470,65);
    82.                   g.lineTo(483,27);
    83.                 g.stroke();

    84.                 g.beginPath();
    85.                   g.fillStyle="#fecce5";
    86.                   g.moveTo(473,65);
    87.                   g.lineTo(483,30);
    88.                   g.bezierCurveTo(502,46,496,60,512,110);
    89.                 g.closePath();
    90.                 g.fill();

    91.                 //头
    92.                 g.lineWidth=10;
    93.                 g.beginPath();
    94.                   g.strokeStyle="#33190c";
    95.                   g.fillStyle="#ffffd9";
    96.                   g.moveTo(280,6);
    97.                   g.bezierCurveTo(476,0,535,154,541,166);
    98.                   g.lineTo(546,180);
    99.                   g.bezierCurveTo(584,304,530,368,432,392);
    100.                   g.quadraticCurveTo(210,460,90,372);
    101.                   g.quadraticCurveTo(38,324,34,314);
    102.                   g.quadraticCurveTo(1,268,38,174);
    103.                   g.quadraticCurveTo(128,8,280,6);
    104.                 g.closePath();
    105.                 g.fill();
    106.                 g.stroke();

    107.                 //脸白
    108.                 g.fillStyle="#fff";
    109.                 g.beginPath();
    110.                   g.moveTo(29,294);
    111.                   g.quadraticCurveTo(57,339,99,371);
    112.                   g.quadraticCurveTo(272,404,427,390);
    113.                   g.bezierCurveTo(500,371,567,330,549,216);
    114.                   g.bezierCurveTo(560,298,518,360,427,378);
    115.                   g.quadraticCurveTo(272,404,99,364);
    116.                   g.quadraticCurveTo(55,334,29,294);
    117.                 g.closePath();
    118.                 g.fill();

    119.                 //胡须(左边)
    120.                 g.strokeStyle="#33190c";
    121.                 g.lineWidth=7;
    122.                 g.beginPath();
    123.                   g.moveTo(6,212);
    124.                   g.lineTo(23,212);
    125.                   g.stroke();
    126.                   g.moveTo(7,211);
    127.                   g.quadraticCurveTo(5,212,7,213);
    128.                 g.stroke();

    129.                 g.beginPath();
    130.                   g.moveTo(2,246);
    131.                   g.lineTo(15,246);
    132.                   g.stroke();
    133.                   g.moveTo(6,245);
    134.                   g.quadraticCurveTo(1,246,6,247);
    135.                 g.stroke();

    136.                 g.beginPath();
    137.                   g.moveTo(6,284);
    138.                   g.lineTo(17,281);
    139.                   g.stroke();
    140.                   g.moveTo(9,282);
    141.                   g.quadraticCurveTo(4,287,6,282);
    142.                 g.stroke();
    143.                 //胡须(右边边)
    144.                 g.lineWidth=6;
    145.                 g.beginPath();
    146.                   g.moveTo(529,233);
    147.                   g.lineTo(596,246);
    148.                   g.stroke();
    149.                   g.moveTo(530,233);
    150.                   g.quadraticCurveTo(528,233,530,234);
    151.                   g.stroke();
    152.                   g.moveTo(596,246);
    153.                   g.quadraticCurveTo(597,246,596,246);
    154.                 g.stroke();

    155.                 g.beginPath();
    156.                   g.moveTo(525,263);
    157.                   g.lineTo(587,290);
    158.                   g.stroke();
    159.                   g.moveTo(526,263);
    160.                   g.quadraticCurveTo(524,263,527,264);
    161.                   g.stroke();
    162.                   g.moveTo(587,290);
    163.                   g.quadraticCurveTo(589,291,587,290);
    164.                 g.stroke();

    165.                 g.beginPath();
    166.                   g.moveTo(523,296);
    167.                   g.lineTo(581,331);
    168.                   g.stroke();
    169.                   g.moveTo(524,298);
    170.                   g.quadraticCurveTo(522,294,524,297);
    171.                   g.stroke();
    172.                   g.moveTo(581,331);
    173.                   g.quadraticCurveTo(583,332,581,331);
    174.                 g.stroke();

    175.                 //眉毛(左边)
    176.                 g.lineWidth=5;
    177.                 g.beginPath();
    178.                   g.moveTo(163,40);
    179.                   g.lineTo(182,42);
    180.                   g.moveTo(182,42);
    181.                   g.quadraticCurveTo(185,42,180,42);
    182.                 g.stroke();
    183.                 //眉毛(右边)
    184.                 g.beginPath();
    185.                   g.moveTo(374,54);
    186.                   g.quadraticCurveTo(386,43,396,57);
    187.                   g.moveTo(375,54);
    188.                   g.quadraticCurveTo(372,56,376,53);
    189.                   g.moveTo(395,56);
    190.                   g.quadraticCurveTo(397,58,395,56);
    191.                 g.stroke();

    192.                 //额头蓝点
    193.                 g.fillStyle="#e5f8ef";
    194.                 g.beginPath();
    195.                   g.moveTo(190,30);
    196.                   g.bezierCurveTo(180,57,216,65,218,20);
    197.                   g.quadraticCurveTo(203,23,190,30);
    198.                 g.closePath();
    199.                 g.fill();
    200.                 g.beginPath();
    201.                   g.moveTo(239,15);
    202.                   g.bezierCurveTo(233,70,280,60,278,11);
    203.                   g.quadraticCurveTo(257,11,239,15);
    204.                 g.closePath();
    205.                 g.fill();
    206.                 g.beginPath();
    207.                   g.moveTo(304,11);
    208.                   g.bezierCurveTo(285,48,329,74,339,15);
    209.                   g.quadraticCurveTo(322,11,304,11);
    210.                 g.closePath();
    211.                 g.fill();
    212.                 g.beginPath();
    213.                   g.moveTo(365,20);
    214.                   g.bezierCurveTo(354,47,380,53,389,28);
    215.                   g.quadraticCurveTo(378,23,366,20);
    216.                 g.closePath();
    217.                 g.fill();

    218.                 //腮红(左边)
    219.                 g.fillStyle="#ffcce6";
    220.                 g.beginPath();
    221.                   g.moveTo(110,199);
    222.                   g.quadraticCurveTo(73,179,47,198);
    223.                   g.bezierCurveTo(41,204,43,211,47,215);
    224.                   g.quadraticCurveTo(73,235,120,212);
    225.                 g.closePath();
    226.                 g.fill();
    227.                 //腮红(右边)
    228.                 g.beginPath();
    229.                   g.moveTo(428,200);
    230.                   g.quadraticCurveTo(470,186,507,210);
    231.                   g.bezierCurveTo(519,218,514,240,497,244);
    232.                   g.quadraticCurveTo(454,256,420,227);
    233.                 g.closePath();
    234.                 g.fill();
    235.                 //害羞(左边)
    236.                 g.strokeStyle="#361909";
    237.                 g.lineWidth=6;
    238.                 g.beginPath();
    239.                   g.moveTo(71,205);
    240.                   g.lineTo(65,212);
    241.                   g.moveTo(71,205);
    242.                   g.bezierCurveTo(75,200,74,202,71,205);
    243.                   g.moveTo(66,211);
    244.                   g.bezierCurveTo(63,213,62,217,66,210);
    245.                   g.moveTo(88,205);
    246.                   g.lineTo(82,212);
    247.                   g.moveTo(88,205);
    248.                   g.bezierCurveTo(90,202,91,202,88,205);
    249.                   g.moveTo(82,212);
    250.                   g.bezierCurveTo(80,215,78,216,82,212);
    251.                 g.stroke();
    252.                 //害羞(右边)
    253.                 g.beginPath();
    254.                   g.moveTo(448,218);
    255.                   g.lineTo(443,224);
    256.                   g.moveTo(448,218);
    257.                   g.bezierCurveTo(452,213,454,215,444,224);
    258.                   g.moveTo(443,224);
    259.                   g.bezierCurveTo(441,225,439,230,444,224);
    260.                   g.moveTo(466,218);
    261.                   g.lineTo(460,225);
    262.                   g.moveTo(466,219)
    263.                   g.bezierCurveTo(468,215,469,216,465,219);
    264.                   g.moveTo(460,225);
    265.                   g.bezierCurveTo(455,230,455,231,460,225);
    266.                   g.moveTo(482,220);
    267.                   g.lineTo(475,228);
    268.                   g.moveTo(482,221);
    269.                   g.bezierCurveTo(484,216,484,219,481,221);
    270.                   g.moveTo(476,227);
    271.                   g.bezierCurveTo(472,231,472,231,476,227);
    272.                 g.stroke();

    273.                 //眼睛(左边)
    274.                 g.fillStyle="#35190d";
    275.                 g.beginPath();
    276.                   g.moveTo(129,140);
    277.                   g.bezierCurveTo(206,118,215,204,172,226);
    278.                   g.bezierCurveTo(92,249,85,165,129,140);
    279.                 g.closePath();
    280.                 g.fill();
    281.                 //眼睛(右边)
    282.                 g.beginPath();
    283.                   g.moveTo(332,154);
    284.                   g.bezierCurveTo(421,108,462,208,407,240);
    285.                   g.bezierCurveTo(357,279,264,214,332,154);
    286.                 g.closePath();
    287.                 g.fill();

    288.                 //睫毛(左边)
    289.                 g.strokeStyle="#35190d";
    290.                 g.lineWidth=6;
    291.                 g.beginPath();
    292.                   g.moveTo(129,146);
    293.                   g.lineTo(129,131);
    294.                 g.stroke();
    295.                 //睫毛(右边)
    296.                 g.beginPath();
    297.                   g.moveTo(334,156);
    298.                   g.lineTo(328,146);
    299.                 g.stroke();

    300.                 //眼珠(左边)
    301.                 g.fillStyle="#fff";
    302.                 g.beginPath();
    303.                   g.moveTo(177,151);
    304.                   g.bezierCurveTo(190,152,183,166,177,164);
    305.                   g.bezierCurveTo(168,164,168,152,177,151);
    306.                 g.closePath();
    307.                 g.fill();
    308.                 //眼珠(右边)
    309.                 g.beginPath();
    310.                   g.moveTo(393,154);
    311.                   g.bezierCurveTo(406,155,402,171,393,169);
    312.                   g.bezierCurveTo(384,169,382,155,393,154);
    313.                 g.closePath();
    314.                 g.fill();

    315.                 //鼻子
    316.                 g.fillStyle="#35190e";
    317.                 g.beginPath();
    318.                   g.moveTo(237,220);
    319.                  g.bezierCurveTo(237,209,254,209,254,220);
    320.                  g.bezierCurveTo(254,231,238,231,237,220);
    321.                 g.closePath();
    322.                 g.fill();

    323.                 g.strokeStyle="#35190e";
    324.                 g.lineWidth=4;
    325.                 g.beginPath();
    326.                   g.moveTo(218,229);
    327.                   g.bezierCurveTo(222,241,239,243,245,226);
    328.                   g.moveTo(219,230);
    329.                   g.bezierCurveTo(217,228,218,228,219,230);
    330.                   g.moveTo(245,226);
    331.                   g.bezierCurveTo(254,245,279,244,285,234);
    332.                   g.moveTo(285,234);
    333.                   g.bezierCurveTo(286,232,287,232,285,234);
    334.                 g.stroke();

    335.                 //爱心
    336.                 g.strokeStyle="#33190c";
    337.                 g.fillStyle="#fe0000";
    338.                 g.lineWidth=10;
    339.                 g.beginPath();
    340.                   g.moveTo(98,376);
    341.                   g.bezierCurveTo(70,301,156,194,246,303);
    342.                   g.bezierCurveTo(403,197,476,345,424,402);
    343.                   g.quadraticCurveTo(375,475,260,528);
    344.                   g.quadraticCurveTo(247,536,225,526);
    345.                   g.quadraticCurveTo(130,463,98,376);
    346.                 g.closePath();
    347.                 g.fill();
    348.                 g.stroke();
    349.                 //爱心中心
    350.                 g.fillStyle="#ff334c";
    351.                 g.beginPath();
    352.                   g.moveTo(109,372);
    353.                   g.bezierCurveTo(68,240,214,226,236,326);
    354.                   g.quadraticCurveTo(297,250,384,278);
    355.                   g.quadraticCurveTo(408,288,404,316);
    356.                   g.quadraticCurveTo(380,416,263,469);
    357.                   g.bezierCurveTo(241,480,220,470,202,464);
    358.                   g.quadraticCurveTo(118,416,109,372);
    359.                 g.closePath();
    360.                 g.fill();
    361.                 //白点
    362.                 g.fillStyle="#fff";
    363.                 g.beginPath();
    364.                   g.moveTo(129,273);
    365.                   g.quadraticCurveTo(142,260,155,273);
    366.                   g.bezierCurveTo(151,286,125,278,129,273);
    367.                 g.closePath();
    368.                 g.fill();
    369.                 g.beginPath();
    370.                   g.moveTo(292,293);
    371.                   g.bezierCurveTo(296,283,333,271,351,278);
    372.                   g.bezierCurveTo(350,292,300,302,292,293);
    373.                 g.closePath();
    374.                 g.fill();

    375.                 //手(左边)
    376.                 g.strokeStyle="#33190c";
    377.                 g.fillStyle="#fff";
    378.                 g.lineWidth=6;
    379.                 g.beginPath();
    380.                   g.moveTo(98,377);
    381.                   g.bezierCurveTo(137,367,128,417,113,415);
    382.                   g.bezierCurveTo(97,418,74,390,98,377);
    383.                 g.closePath();
    384.                 g.fill();
    385.                 g.stroke();
    386.                 //手(右边)
    387.                 g.beginPath();
    388.                   g.moveTo(390,434);
    389.                   g.bezierCurveTo(358,407,392,366,427,388);
    390.                   g.quadraticCurveTo(416,409,393,435);
    391.                 g.closePath();
    392.                 g.fill();
    393.                 g.stroke();

    394.         </script>
    395. </body>
    396. </html>
    复制代码


    笔记来源:
    HTML5 canvas 原创“小猫咪”
    http://www.w3cfuns.com/notes/197 ... 0375719354f51a34c01
    相关推荐:
    HTML5 canvas七龙珠·孙悟空
    http://bbs.html5cn.org/forum.php ... 484&fromuid=1127630

  • TA的每日心情
    开心
    2016-8-4 11:54
  • 签到天数: 30 天

    [LV.5]常住居民I

    发表于 2016-7-12 18:20:21 | 显示全部楼层

    HTML5中国微信

    小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

    GMT+8, 2017-5-24 04:36

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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