php创建一个猫咪,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();
php创建一个猫咪,html5的应用-画一个可爱的小猫咪效果图相关推荐
- 2023年春节祝福第二弹——送你一只守护兔,让它温暖每一个你【html5 css3】画会动的小兔子,炫酷充电,字体特效
2023年春节祝福第二弹 送你一只守护兔,让它温暖每一个你! [html5 css3]画一只会动的兔子 目录 一.送你一只守护兔,效果图 二.前言 三.代码解释及部分特效教程 (1).css3 立体字 ...
- python制作一个计时器_用Python制作一个猫咪小秒表
Python基础视频教程 入门免费观看-创客学院www.makeru.com.cn 秒表是一项随处可见的神奇小物件,最常用到秒表的两大场景,一个是运动会,另一个是健身房,因此也总是让人联想到汗水和心 ...
- 用python制作一个猫咪小秒表
如果你也想赚钱,实现财务自由,但接触不到优质的人脉和资源,可以到公June浩:成长home,发"资源" ,就会看到我吐血整理的168条保姆级零基础吸金秘籍,跟着我一起亲历毕业5年. ...
- 使用 Vue 从零开始手写一个猫咪瀑布流组件
点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 猫咪瀑布流 如下动态图,一张张不规则的可爱猫咪照片是否勾起了你的少女心呢? 瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式.瀑布 ...
- html5 --- 使用canvas画一个渐变矩形
我们希望得到如下效果: 首先准备画布 // HTML <canvas width="500" height="375" id ="a" ...
- 画一个空心圆_用SolidWorks画一个空心挂钩,这种画法稍微有点麻烦
建模过程 1.在[右视基准面]画一个圆. 2.[旋转]. 3.还是在[右视基准面]画圆. 4.[拉伸凸台]等距:75 ,给定深度:30 . 5.在[前视基准面]画圆弧和直线.(上方是两段圆弧) 6.在 ...
- python程序、画一个笑脸_如何使用canvas画一个微笑的表情(代码示例)
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...
- html5用圆圈画猫,html5的应用-画一个可爱的小猫咪效果图
html5是一门很强大的语言,想在非常流行,用他画的图都显得非常的漂亮还看 效果截图: 程序: Html5 - 小猫咪 body{text-align: center;} .wrapper{ heig ...
- Html5基于Canvas画一个动态时钟
文章目录 前言 一.前期准备 二.绘制刻度 1.流程 2.效果图 三.绘制文字 1.流程 2.效果图 四.绘制指针 1.取得当前时间 2.绘制秒针 3.绘制分针 4.绘制时针 5.效果图 五.绘制圆心 ...
最新文章
- [poj] 2318 TOYS || 判断点在多边形内
- 【前端4】bootstrap:栅格系统,隔行/触摸换色,分页/导航条,模态框/轮播图,旅游首页
- eclipse debug 重新指定源码
- .NET Core 2.1.5和.NET Core SDK 2.1.403发布
- 订阅号 笔记记录开发 php,微信订阅号开发笔记(五)
- Cucumber 相关资源
- 《天天数学》连载07:一月七日
- wamp新建虚拟目录无法运行的解决方法
- HttpComponents入门解析
- IBM V3500存储更换控制器一例
- Mobile First! Wijmo 5 之 架构
- MapReduce自定义排序、自定义分组、自定义分区
- 各种css新闻页样例
- PPT打开出错/可尝试修复此演示文稿
- 带答案APP测试面试题分享,助攻你的面试!面试官都惊呆了..
- 动态规划 - N步台阶问题
- Python第六周作业
- 纳斯达克的上市标准和条件
- 亚像元定位 硬分类 软分类
- 趋势EA- 每单固定止损止盈