<!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>

    <div class="wrapper">

        <canvas width="600" height="554"></canvas>

    </div>

    <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 canvas 画hello ketty的更多相关文章

  1. HTML5 Canvas 画虚线组件

    前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...

  2. HTML5 Canvas 画钟表

    画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...

  3. CSS3进度条 和 HTML5 Canvas画圆环

    看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...

  4. html5 canvas画饼

    1. [图片] lxdpie.jpg ​2. [文件] lqdpie.html ~ 801B     下载(7) <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...

  5. html5 canvas画不出图像的原因

    很久没写博客了,今年过年的时候,家里出了意外,现在心里依然很难受.6月份之前一直忙着写毕业论文,答辩完6月初回公司继续上班,今天刚好周末有空,就写下之前碰到一个问题. 做一个图像查看器(基于Chrom ...

  6. html5 canvas画流程图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. HTML5 Canvas画数字时钟

    先不说废话,没代码算个蛋. 一些地方注释都写得比较清楚,不过这只是部分,因为只有秒针,但是时针,分针的逻辑都是一致的. 代码中有些坐标不知道为什么较不准,看看就好

  8. html5 canvas画进度条

    这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...

  9. html5 canvas画云

    使用函数画出天空的云层图像: y 主要使用到的是数学的圆与弧度之间转换关系: 代码如下 //div对象 var parentContainer = document.getElementById(&q ...

随机推荐

  1. cocoapods导入第三方库

    1.移除现有Ruby默认源 终端:gem sources --remove https://rubygems.org/ 2.使用新的源 终端:gem sources -a https://ruby.t ...

  2. IOS创建单例的两种方法

    1.0  苹果官方写法:  static AccountManager *DefaultManager = nil; + (AccountManager *)defaultManager { if ( ...

  3. [jquery] 图片热区随图片大小自由缩放

    在图片上直接画出带超级链接热区元素map和area相信大家并不陌生,Dreamweaver等网页制作软件都有直接在图片上绘制带超级链接的热区工具,但是直接绘制的热区是不能随着图片自适应放大和缩小的,现 ...

  4. 谈谈对web标准的理解

    Web标准不是某一个标准,而是由一系列标准组合而成.网页主要由三部分组成:结构.表现和行为.对应的标准也分三方面:结构化标准语言主要包括XHTML和HTML以及XML,表现标准语言主要包括CSS,行为 ...

  5. 关于jquery对象和DOM对象的区别

    这个问题的出现是因为自己对jquery不够了解,只会获取简单的Demo,做简单的操作,将jquery的很多方法和js中的混淆,以为js中的很多方法,在jquery中也可以使用,这是完全错误的理解! 所 ...

  6. Nginx学习笔记二基本配置

    1.Nginx的配置文件默认在Nginx程序安装目录的conf二级目录下,主配置文件为nginx.conf.假设您的Nginx安装 在/usr/local/webserver/nginx/目录下,那么 ...

  7. Zigbee、WiFi和433MHz无线技术各有特点

    Zigbee.WiFi和433MHz无线技术都属于近距离无线通讯技术,并且都使用ISM免执照频段,但它们各具特点.   ZigBee的特点是低功耗.高可靠性.强抗干扰性,布网容易,通过无线中继器可以非 ...

  8. Inno Setup 插件 CallbackCtrl V1.1 (回调函数插件)

    原文 http://restools.hanzify.org/article.asp?id=101 VC 重现 InnoCallback 的功能. Version 1.1修正在某些 Windows 平 ...

  9. 全选demo

    我们处理数据时,最好能够支持全选操作. 选中之后,进行删除,或其他处理. 我自己写了一个demo. 主要功能: 1.点击全部选中 2.点击全部取消 3.然后进行获取选中的id,进行处理 代码如下: & ...

  10. nyoj 325 zb的生日（dfs）

    描述今天是阴历七月初五,acm队员zb的生日.zb正在和C小加.never在武汉集训.他想给这两位兄弟买点什么庆祝生日,经过调查,zb发现C小加和never都很喜欢吃西瓜,而且一吃就是一堆的那种,zb ...