踩个猴尾不容易啊 Canvas画个猴子

<!DOCTYPE html>

<html>

<head>

<style>

body{text-align:center;padding-top:3em;}

</style>

</head>

<body>

(function(){

var cvs=document.querySelector("canvas"),

g=cvs.getContext("2d");

g.lineWidth=2;

//右臂

g.beginPath();

g.strokeStyle="#DE821B";

g.fillStyle="#FFDE00";

g.moveTo(261,337);

g.quadraticCurveTo(268,328,287,320);

g.lineTo(323,357);

g.quadraticCurveTo(281,415,243,377);

g.closePath();

g.fill();

g.stroke();

//身体

g.beginPath();

g.strokeStyle="#DE821B";

g.fillStyle="#FFDE00";

g.moveTo(86,265);

g.quadraticCurveTo(33,267,15,292);

g.lineTo(52,339);

g.quadraticCurveTo(88,328,101,341);

g.lineTo(92,336);

g.quadraticCurveTo(88,338,81,347);

g.bezierCurveTo(188,468,306,372,261,306);

g.closePath();

g.fill();

g.stroke();

//衣带

g.beginPath();

g.fillStyle="#000000";

g.moveTo(251,330);

g.quadraticCurveTo(241,369,139,384);

g.quadraticCurveTo(231,400,273,343);

g.closePath();

g.fill();

//右手

g.strokeStyle="#842C00";

g.fillStyle="#BA6830";

g.beginPath();

g.moveTo(15,291);

g.bezierCurveTo(-16,339,31,348,51,339);

g.fill();

g.stroke();

g.beginPath();

g.moveTo(51,339);

g.quadraticCurveTo(65,295,15,291);

g.closePath();

g.fill();

//左手

g.beginPath();

g.moveTo(287,320);

g.bezierCurveTo(370,283,377,363,322,356);

g.fill();

g.stroke();

g.beginPath();

g.moveTo(287,320);

g.quadraticCurveTo(291,349,322,356);

g.closePath();

g.fill();

//左脚

g.beginPath();

g.strokeStyle="#690203";

g.fillStyle="#000000";

g.moveTo(110,404);

g.quadraticCurveTo(57,440,113,453);

g.closePath();

g.fill();

g.stroke();

//右脚

g.beginPath();

g.moveTo(110,424);

g.bezierCurveTo(58,465,117,498,173,463);

g.closePath();

g.fill();

g.stroke();

//裙角

g.beginPath();

g.strokeStyle="#949591";

g.fillStyle="#D1D2D4";

g.moveTo(255,424);

g.quadraticCurveTo(242,436,222,437);

g.quadraticCurveTo(223,426,219,425);

g.quadraticCurveTo(231,417,255,424);

g.fill();

g.stroke()

g.closePath();

//左腿

g.beginPath();

g.strokeStyle="#650300";

g.fillStyle="#ED1B24";

g.moveTo(211,404);

g.quadraticCurveTo(245,467,166,467);

g.closePath();

g.fill();

g.stroke();

//右腿

g.beginPath();

g.moveTo(62,364);

g.quadraticCurveTo(45,427,127,433);

g.quadraticCurveTo(130,457,170,463);

g.quadraticCurveTo(203,442,194,403);

g.closePath();

g.fill();

g.stroke();

//裙摆

g.beginPath();

g.strokeStyle="#949591";

g.fillStyle="#FFFFFF";

g.moveTo(45,354);

g.quadraticCurveTo(174,413,246,410);

g.quadraticCurveTo(254,419,254,424);

g.quadraticCurveTo(226,414,204,438);

g.quadraticCurveTo(166,389,125,432);

g.quadraticCurveTo(102,400,66,403);

g.quadraticCurveTo(70,372,32,365);

g.quadraticCurveTo(36,360,45,354);

g.fill();

g.stroke();

g.closePath();

//裙

g.beginPath();

g.strokeStyle="#952C3D";

g.fillStyle="#EE707B";

g.moveTo(81,346);

g.quadraticCurveTo(142,418,224,398);

g.quadraticCurveTo(242,407,245,410);

g.quadraticCurveTo(221,410,206,424);

g.quadraticCurveTo(164,384,124,415);

g.quadraticCurveTo(114,396,79,394);

g.quadraticCurveTo(74,368,44,354);

g.quadraticCurveTo(64,343,83,346);

g.closePath();

g.fill();

g.stroke();

//黑斑

g.beginPath();

g.fillStyle="#000000";

g.moveTo(62,348);

g.bezierCurveTo(59,365,90,390,86,353);

g.lineTo(80,346);

g.quadraticCurveTo(69,345,62,348);

g.closePath();

g.fill();

g.beginPath();

g.moveTo(112,377);

g.quadraticCurveTo(114,380,132,388);

g.bezierCurveTo(114,397,88,386,112,377);

g.closePath();

g.fill();

g.beginPath();

g.moveTo(205,402);

g.quadraticCurveTo(212,401,226,398);

g.bezierCurveTo(245,406,196,420,205,403);

g.closePath();

g.fill();

//裙

g.beginPath();

g.strokeStyle="#952C3D";

g.fillStyle="#EE707B";

g.moveTo(106,395);

g.quadraticCurveTo(160,363,193,412);

g.quadraticCurveTo(160,389,125,414);

g.fill();

g.stroke();

g.closePath();

g.beginPath();

g.fillStyle="#000000";

g.moveTo(148,383);

g.quadraticCurveTo(164,384,177,396);

g.bezierCurveTo(153,405,140,382,148,383);

g.closePath();

g.fill();

//修整

g.beginPath();

g.moveTo(81,346);

g.quadraticCurveTo(48,345,31,365);

g.stroke();

g.closePath();

g.beginPath();

g.moveTo(228,399);

g.quadraticCurveTo(257,415,254,424);

g.stroke();

g.closePath();

//帽冠

g.beginPath();

g.strokeStyle="#DE821B";

g.fillStyle ="#DDA90C";

g.moveTo(40,137);

g.bezierCurveTo(-8,152,-12,225,34,222);

g.stroke();

g.closePath();

g.fill();

g.beginPath();

g.moveTo(38,137);

g.bezierCurveTo(0,152,4,194,32,202);

g.closePath();

g.fillStyle="#FFDE00";

g.fill();

//帽子外边

g.beginPath();

g.moveTo(290,53);

g.quadraticCurveTo(250,17,135,51);

g.bezierCurveTo(-5,105,5,270,102,268);

g.stroke();

g.closePath();

g.fillStyle="#DDA90C";

g.fill();

g.beginPath();

g.fillStyle="#FFDE00";

g.moveTo(290,54);

g.bezierCurveTo(258,19,115,35,72,95);

g.bezierCurveTo(75,95,3,207,100,227);

g.closePath();

g.fill();

//头巾

g.strokeStyle="#6B9C7F";

g.fillStyle="#B2DDC9";

g.beginPath();

g.moveTo(329,98);

g.bezierCurveTo(294,15,147,72,110,203);

g.fill();

g.stroke();

g.closePath();

g.beginPath();

g.fillStyle="#8DB2A4";

g.moveTo(247,62);

g.lineTo(261,72);

g.lineTo(280,70);

g.lineTo(262,58);

g.closePath();

g.fill();

//围巾

g.beginPath();

g.strokeStyle="#007CB2";

g.fillStyle="#4DC6E1";

g.moveTo(88,268);

g.bezierCurveTo(132,277,173,358,214,318);

g.quadraticCurveTo(185,337,185,352);

g.bezierCurveTo(221,333,235,354,252,342);

g.quadraticCurveTo(272,340,270,358);

g.quadraticCurveTo(301,333,269,318);

g.lineTo(280,325);

g.quadraticCurveTo(292,297,165,227);

g.fill();

g.stroke();

g.closePath();

g.beginPath();

g.lineTo(265,312);

g.quadraticCurveTo(285,350,250,344);

g.quadraticCurveTo(262,333,253,318);

g.closePath();

g.fill();

g.stroke();

//头

g.beginPath();

g.strokeStyle="#842C00";

g.fillStyle="#BA6830";

g.moveTo(351,141);

g.bezierCurveTo(313,-3,144,102,111,234);

g.bezierCurveTo(118,247,147,327,260,321);

g.stroke();

g.closePath();

g.fill();

//头阴影

g.beginPath();

g.fillStyle="#8B411F";

g.moveTo(316,83);

g.quadraticCurveTo(341,103,349,135);

g.quadraticCurveTo(338,120,337,119);

g.quadraticCurveTo(330,103,311,83);

g.fill();

g.closePath();

//头巾结

g.beginPath();

g.strokeStyle="#6B9C7F";

g.fillStyle="#B2DDC9";

g.moveTo(231,2);

g.quadraticCurveTo(245,75,311,78);

g.quadraticCurveTo(331,56,325,13);

g.quadraticCurveTo(316,16,303,5);

g.quadraticCurveTo(315,37,304,65);

g.quadraticCurveTo(263,58,264,2);

g.quadraticCurveTo(255,12,231,1);

g.quadraticCurveTo(235,61,301,78);

g.fill();

g.stroke();

g.closePath();

g.beginPath();

g.moveTo(287,57);

g.quadraticCurveTo(296,65,295,78);

g.quadraticCurveTo(315,85,315,80);

g.quadraticCurveTo(306,49,281,53);

g.stroke();

//g.closePath();

g.fill();

g.beginPath();

g.fillStyle="#8DB2A4";

g.moveTo(298,79);

g.quadraticCurveTo(322,88,311,70);

g.quadraticCurveTo(306,77,298,79);

g.fill();

g.closePath();

//耳朵

g.beginPath();

g.strokeStyle="#842C00";

g.fillStyle="#BA6830";

g.moveTo(127,207);

g.bezierCurveTo(62,164,36,281,135,268);

g.stroke();

g.closePath();

g.fill();

g.beginPath();

g.fillStyle="#95411D";

g.moveTo(123,236);

g.bezierCurveTo(92,203,64,250,122,236);

g.closePath();

g.fill();

g.beginPath();

g.moveTo(127,238);

g.lineWidth=1;

g.strokeStyle="#842C00";

g.quadraticCurveTo(104,220,88,225);

g.stroke();

//脸

g.beginPath();

g.moveTo(322,253);

g.strokeStyle="#842C00";

g.fillStyle="#FFFFFF";

g.lineWidth=2;

g.bezierCurveTo(276,235,376,197,348,135);

g.quadraticCurveTo(303,73,237,81);

g.quadraticCurveTo(203,93,170,129);

g.quadraticCurveTo(143,223,231,268);

g.bezierCurveTo(198,276,216,314,253,321);

g.quadraticCurveTo(279,319,314,302);

g.lineTo(317,294);

g.quadraticCurveTo(338,285,316,257);

g.closePath();

g.stroke();

g.fill();

//脸阴影

g.beginPath();

g.fillStyle="#CCD0D5";

g.moveTo(341,127);

g.quadraticCurveTo(348,132,349,139);

g.quadraticCurveTo(361,172,331,206);

g.lineTo(329,201);

g.quadraticCurveTo(358,159,339,126);

g.fill();

g.closePath();

//眉毛

g.beginPath();

g.moveTo(279,137);

g.strokeStyle="#096F30";

g.fillStyle="#5CA74A";

g.quadraticCurveTo(295,114,308,132);

g.bezierCurveTo(312,142,307,143,312,162);

g.bezierCurveTo(296,139,303,129,280,136);

g.closePath();

g.stroke();

g.fill();

//眼眶

g.beginPath();

g.moveTo(279,137);

g.strokeStyle="#B21D21";

g.fillStyle="#ED1B24";

g.lineWidth=1;

g.moveTo(321,253);

g.bezierCurveTo(302,242,309,234,331,207);

g.bezierCurveTo(279,109,198,173,235,228);

g.bezierCurveTo(259,269,290,239,325,271);

g.quadraticCurveTo(324,265,316,258);

g.fill();

g.stroke();

g.closePath();

//眼眶阴影

g.beginPath();

g.fillStyle="#B81214";

g.moveTo(328,202);

g.quadraticCurveTo(305,229,310,240);

g.quadraticCurveTo(311,229,332,207);

g.fill();

g.closePath();

//眼睛

g.beginPath();

g.moveTo(271,252);

g.strokeStyle="#FFDE00";

g.fillStyle="#FFFFFF";

g.bezierCurveTo(226,187,326,161,299,257);

g.stroke();

g.closePath();

g.stroke();

g.fill();

//眼球

g.beginPath();

g.fillStyle="#49494B";

g.moveTo(292,255);

g.bezierCurveTo(280,217,315,200,299,257);

g.closePath();

g.fill();

g.beginPath();

g.fillStyle="#000000";

g.moveTo(299,251);

g.bezierCurveTo(272,242,314,187,299,251);

g.closePath();

g.fill();

g.beginPath();

g.fillStyle="#FFFFFF";

g.moveTo(298,229);

g.bezierCurveTo(292,208,287,255,298,233);

g.closePath();

g.fill();

//嘴巴

g.beginPath();

g.strokeStyle="#6DAE5E";

g.moveTo(310,267);

g.bezierCurveTo(328,282,312,308,293,303);

g.stroke();

g.strokeStyle="#842C00";

g.moveTo(321,292);

g.bezierCurveTo(322,301,318,304,312,298);

g.stroke();

g.fill();

g.closePath();

//右手阴影

g.beginPath();

g.fillStyle="#97441E";

g.moveTo(8,331);

g.quadraticCurveTo(28,336,53,318);

g.quadraticCurveTo(53,328,50,339);

g.quadraticCurveTo(18,347,10,331);

g.fill();

g.closePath();

g.beginPath();

g.moveTo(311,352);

g.quadraticCurveTo(326,346,338,354);

g.quadraticCurveTo(327,359,311,352);

g.fill();

g.closePath();

g.beginPath();

g.fillStyle="#DDA80C";

g.moveTo(54,318);

g.bezierCurveTo(77,303,137,338,107,347);

g.quadraticCurveTo(94,324,51,339);

g.quadraticCurveTo(54,326,54,318);

g.fill();

g.closePath();

g.beginPath();

g.moveTo(107,347);

g.quadraticCurveTo(104,350,88,353);

g.lineTo(83,345);

g.quadraticCurveTo(85,341,91,337);

g.quadraticCurveTo(99,341,107,345);

g.fill();

g.closePath();

g.beginPath();

g.moveTo(260,371);

g.quadraticCurveTo(277,387,311,352);

g.quadraticCurveTo(316,356,322,356);

g.quadraticCurveTo(287,408,250,382);

g.fill();

g.closePath();

//云

g.strokeStyle="#43AEDA";

g.beginPath();

g.moveTo(337,297);

g.quadraticCurveTo(396,311,460,301);

g.bezierCurveTo(442,296,453,278,462,283);

g.moveTo(475,274);

g.bezierCurveTo(487,299,447,284,464,265);

g.bezierCurveTo(476,251,487,262,489,263);

g.bezierCurveTo(464,227,533,216,533,243);

g.bezierCurveTo(530,277,488,246,514,241);

g.moveTo(529,228);

g.bezierCurveTo(554,165,660,205,622,249);

g.bezierCurveTo(667,267,620,326,585,278);

g.bezierCurveTo(578,298,533,273,559,254);

g.bezierCurveTo(587,244,581,282,565,270);

g.moveTo(637,287);

g.bezierCurveTo(672,316,624,331,614,323);

g.moveTo(598,317);

g.bezierCurveTo(595,337,566,309,592,306);

g.bezierCurveTo(626,304,616,346,585,334);

g.bezierCurveTo(570,353,536,346,530,324);

g.bezierCurveTo(529,283,589,323,544,320);

g.moveTo(516,317);

g.bezierCurveTo(494,307,527,293,532,310);

g.moveTo(528,327);

g.bezierCurveTo(517,337,488,332,477,314);

g.moveTo(480,311);

g.quadraticCurveTo(425,319,337,297);

g.stroke();

g.closePath();

g.beginPath();

g.fillStyle="#C7E6F4";

g.moveTo(480,311);

g.quadraticCurveTo(425,319,337,297);

g.quadraticCurveTo(425,315,473,306);

g.fill();

g.closePath();

g.beginPath();

g.moveTo(606,202);

g.quadraticCurveTo(642,216,623,250);

g.quadraticCurveTo(615,244,601,248);

g.quadraticCurveTo(632,228,606,202);

g.fill();

g.closePath();

g.beginPath();

g.moveTo(630,254);

g.bezierCurveTo(663,282,609,315,589,281);

g.bezierCurveTo(589,292,650,299,630,254);

g.fill();

g.closePath();

g.beginPath();

g.moveTo(646,296);

g.quadraticCurveTo(659,325,614,324);

g.lineTo(614,324);

g.quadraticCurveTo(648,319,646,296);

g.fill();

g.closePath();

g.beginPath();

g.moveTo(573,328);

g.quadraticCurveTo(574,339,561,345);

g.quadraticCurveTo(578,343,585,334);

g.fill();

g.closePath();

g.beginPath();

g.moveTo(501,331);

g.quadraticCurveTo(539,325,523,302);

g.quadraticCurveTo(535,309,530,313);

g.quadraticCurveTo(529,309,528,326);

g.quadraticCurveTo(515,335,501,331);

g.fill();

g.closePath();

})();

</script>

</body>

</html>

预览效果图：

关注“ web前端学习部落22群”群号领取前端免费学习资料及工具！

踩个猴尾不容易啊 Canvas画个猴子的更多相关文章

使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
canvas 画圈 demo
html代码: <canvas id="clickCanvas2" width="180" height="180" data-to ...
canvas画随机闪烁的星星
canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...
canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
Canvas画椭圆的方法
虽然标题是画椭圆,但是我们先来说说Canvas中的圆相信大家对于Canvas画圆都不陌生 oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...
深夜，用canvas画一个时钟
深夜,用canvas画一个时钟查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
樱花的季节，教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果第一步,我们先画出一棵 ...
HTML5之Canvas画圆形
HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...
HTML5之Canvas画正方形
HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

随机推荐

CSS 优先级判断
在面试中被问到这个问题来记录下发现自己之前之所以会忘记还是缺少理解的记忆参考 CSS权威指南一个CSS选择器的特殊性值表述为4个部分 0 0 0 0 对于选择器中给定的各个ID的属性值 ...
Saltstack
一.Satlstack的概述 Saltstack是什么? Salt是一种和以往不同的基础设施管理方法,它是建立在大规模系统高速通讯能力可以大幅提升的想法上.这种方法使得Salt成为一个强大的能够解决基 ...
RDVTabBarController的基本使用以及tabbar的防止双点击方法
RDVTabBarController这个库写得相当不错,所以今天就简单介绍下它的基本使用,看里面可以清楚的知道代码规范的重要性,这个库的使用方法和官方的相识下载地址:https://github. ...
线段树好题（2004集训队林涛PPT中的3题）
1.snake:主要是要意识到全局的可能连法只有一种= =(略坑,题目的最小长度是唬人的……),所以关键就是能否构造出符合题意的图,可以考虑搜索解决,搜出一个就OK了,但是会发现那些满足条件中线段在非 ...
HDU 1087 Super Jumping&excl; Jumping&excl; Jumping
HDU 1087 题目大意:给定一个序列,只能走比当前位置大的位置,不可回头,求能得到的和的最大值.(其实就是求最大上升(可不连续)子序列和) 解题思路:可以定义状态dp[i]表示以a[i]为结尾的上 ...
[Python] 文科生零基础学编程系列二——数据类型、变量、常量的基础概念
上一篇:[Python] 文科生零基础学编程系列--对象.集合.属性.方法的基本定义下一篇: (仍先以最简单的Excel的VBA为例,语法与Python不同,但概念和逻辑需要理解透彻) p.p1 { ...
Apache Spark Jobs 性能调优
当你开始编写 Apache Spark 代码或者浏览公开的 API 的时候,你会遇到各种各样术语,比如transformation,action,RDD(resilient distributed d ...
Oracle获取异常的具体出处dbms&lowbar;utility&period;format&lowbar;error&lowbar;backtrace
DBMS_UTILITY.FORMAT_ERROR_BACKTRACE :返回当前异常相应的描述,通过它就能知道异常的最初生成处. 系统为最近一次生成的异常设置了一个栈,并跟踪它的传递过程,而这个 ...
不一样的go语言-不同的OO
前言 go语言因为产生时代的原因,大神们在设计go时,不得不考虑业界的流行趋势(编程理念),使得go既可以面向过程编程,也可以面向对象编程.这里不探讨两者的优劣,存在即是合理,面向过程编程经久不衰 ...
7&period; Bagging &amp&semi; Random Forest
通过前面集成学习的介绍我们知道,欲得到泛化性能强的集成学习器,集成中个体学习器应尽量相互独立:虽然“独立”在现实任务中无法做到,但可以设法使基学习器尽可能具有较大差异. 1. Bagging 自助采样 ...