html5用圆圈画猫,html5的应用-画一个可爱的小猫咪效果图

html5是一门很强大的语言，想在非常流行，用他画的图都显得非常的漂亮还看

效果截图：

程序：

Html5 - 小猫咪

body{text-align: center;}

.wrapper{ height:800px;}

canvas{ margin-top: 123px;}

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();

html5用圆圈画猫,html5的应用-画一个可爱的小猫咪效果图相关推荐

php创建一个猫咪,html5的应用-画一个可爱的小猫咪效果图
html5是一门很强大的语言,想在非常流行,用他画的图都显得非常的漂亮还看效果截图: 程序: Html5 - 小猫咪 body{text-align: center;} .wrapper{ heig ...
用python画猫咪老师怎么画_卡通简笔画：猫咪老师怎么画？经验告诉你该这样...
猫咪老师是动画<夏目友人帐>中的主要角色之一,并且拥有极高的人气,猫咪老师虽然平时看起来不过是只可爱的小猫,但是它的真实身份其实是一只非常厉害的妖怪哦.接下来就和大家分享一下猫咪老师的简单 ...
html5怎么圆圈怎么打开,HTML5动感圆圈
一.准备工作本demo使用HTML5进行实现,在主流浏览器上运行即可.为了保证平台兼容性,我使用了lufylegend引擎,不过渲染部分用的是原生代码,事件.适配等用的是引擎提供的API.引擎地址: ...
可爱猫python_用Python制作一个可爱的猫咪小秒表
秒表是一项随处可见的神奇小物件,最常用到秒表的两大场景,一个是运动会,另一个是健身房,因此也总是让人联想到汗水和心跳,贲张的血管,粗重的呼吸,时间似乎变得缓慢,那一只聚拢万千目光的小小秒表,此刻却像一 ...
coreldraw怎么画猴子_用CorelDraw制作一个可爱的调皮猴子
用制作步骤: 1.打开CorelDraw 11,新建一个文档,在工具栏中选择"椭圆工具",按下Ctrl键拖出一个正圆. 2.在选中圆形的情况下在"属性栏"中设 ...
html中空心圆圈怎么表示,html5使用canvas画空心圆与实心圆
这里给大家分享的是一个学习canvas的时候做的画空心圆与实心圆的练习题,非常简单. 复制代码代码如下: var canvas=document.getElementById("canvas ...
html5画图论文结束语,基于HTML5 Canvas的画图板的设计与实现.doc
单片机论文_优秀毕业论文_毕业论文设计_毕业过关论文_毕业设计_毕业设计说明_毕业论文_单片机毕业论文_基于单片机毕业论文_毕业论文终稿_毕业论文初稿_毕业论文设计_单片机论文_本文档支持完整下载,支 ...
游戏原画设计HTML5模板是一款适合网页游戏原画设计作品展示的HTML5网站模板。
游戏原画设计HTML5模板是一款适合网页游戏原画设计作品展示的HTML5网站模板.不仅仅是首页,二级页面,三级页面,登陆,购物车等,页面齐全功能齐全 js+css+html (img,字体均有), ...
html5画虚线,html5 实现画虚线
html5已经出来好长一段时间了,只是最近才开始接触到它,html5提供了很多内置的函数可以实现很多功能,比如画线段.画矩形.画圆.画弧等.但是html5没有提供画 html5已经出来好长一段时间了 ...

html5用圆圈画猫,html5的应用-画一个可爱的小猫咪效果图

html5用圆圈画猫,html5的应用-画一个可爱的小猫咪效果图相关推荐

最新文章

热门文章