html5 canvas 画hello ketty

<!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的更多相关文章

HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...
HTML5 Canvas 画钟表
画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...
CSS3进度条和 HTML5 Canvas画圆环
看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...
html5 canvas画饼
1. [图片] lxdpie.jpg 2. [文件] lqdpie.html ~ 801B 下载(7) <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
html5 canvas画不出图像的原因
很久没写博客了,今年过年的时候,家里出了意外,现在心里依然很难受.6月份之前一直忙着写毕业论文,答辩完6月初回公司继续上班,今天刚好周末有空,就写下之前碰到一个问题. 做一个图像查看器(基于Chrom ...
html5 canvas画流程图
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
HTML5 Canvas画数字时钟
先不说废话,没代码算个蛋. 一些地方注释都写得比较清楚,不过这只是部分,因为只有秒针,但是时针,分针的逻辑都是一致的. 代码中有些坐标不知道为什么较不准,看看就好
html5 canvas画进度条
这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...
html5 canvas画云
使用函数画出天空的云层图像: y 主要使用到的是数学的圆与弧度之间转换关系: 代码如下 //div对象 var parentContainer = document.getElementById(&q ...

随机推荐

URL 操作
1.$.param()将对象键值对转换为 URL 字符串键值对 var obj = { name : 'Lee', age : 100 }; alert($.param(obj));
Java 中级IO流基础及主要API编程
1. IO流基础知识,流是字节从源到目的地的运行的轨迹,次序是有意义的, 字节会按照次序进行传递, 比如Hello World 在下图中的传递的轨迹.该图形象的解释了IO中流的概念.流中全是字节.2 ...
yii操作数据库（PDO）
1.数据访问对象(DAO): 执行 SQL 语句数据库连接建立后,SQL 语句就可以通过使用 [CDbCommand] 执行了.你可以通过使用指定的SQL语句作为参数调用 [CDbConnectio ...
WDLINUX (Centos5.8) 安装 bcmath
环境 centos5.8 php5.2.17 因为wdos 集成的php5.2.17为精简版,并未包含php52-bcmath扩展. 所以先下载完整php5.2.17源码包 wget -c http: ...
期末考试--nyoj-757
期末考试时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述马上就要考试了,小T有许多作业要做,而且每个老师都给出来了作业要交的期限,如果在规定的期限内没交作业就会扣期末 ...
Azure上Linux虚拟机Mac地址的持久化
有些用户在使用Azure Linux 虚拟机安装软件时,有些软件的license会和当前系统的mac地址绑定,那么在Azure VM重启,reszie(改变尺寸大小),停止然后再启动的时候,虚拟机的M ...
IDEA12 KeyGen Download List
When you use IDEA to develop Java, you can use the following file to generate lincese. Because CNBlo ...
检测android的网络链接状态
http://www.oschina.net/question/100267_61129?sort=default&p=1#tags_nav http://www.cnblogs.com/to ...
将数组适配到ListView
public class TutListActivity extends ListActivity { @Override public void onCreate(Bundle savedInsta ...
Dependency Walker使用说明
Dependency Walker使用说明标签: dllexewindowsvbqq工具 2010-03-29 11:10 25175人阅读评论(22) 收藏举报分类: 基本常识(45) ...

html5 canvas 画hello ketty

html5 canvas 画hello ketty的更多相关文章

随机推荐

热门专题