码绘相比较于手绘肯定是要繁琐，但优势在于可以做一些有意思的动态效果和交互。
DC漫画里，小丑是个癫狂的角色，令人战栗。让我们展现一个癫狂的小丑。 按下空格键：背景变色、小丑抖动； 移动鼠标：小丑随之移动； 点击鼠标：出现“Hhhhh”的笑声字样。 网页里效果比gif好。 ①设置变量isChangeColor判断是否按下空格 设置变量isPressed判断是否点击鼠标 ②随按下空格改变变量isChangeColor的值 随按下鼠标改变变量isPressed的值 ③ondraw()函数里，使用random()函数改变背景颜色与小丑位置。 mouseX和mouseY使小丑随鼠标移动。 ④在joker()函数里，鼠标按下显示字，字的大小在90~100间变化。
1、贝塞尔曲线填充颜色按从第一个点到最后一个点的顺序。 2、后画图层覆盖先画图层。 3、本图样使用了大量贝塞尔曲线，需要借用辅助工具。辅助工具帮助获得贝塞尔曲线的点坐标，大大简化了工作量。 4、裤子阴影 因为后画图层覆盖先画图层。再加裤子阴影时，为了不完全遮挡裤子纹理，把颜色模型设置为 多的第四个参数，调整不透明度。
复制代码到p5.js编辑器测试。
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script> </head> <body> <script> var isChangeColor=false; var isPressed=false; function setup() { createCanvas(900,900); frameRate(60); } function draw() { if(isChangeColor) //癫狂 { background(random(255),random(255),random(255)); strokeWeight(140); stroke(random(255),random(255),random(255)); line(0, 0, 920, 460); line(500, -60, 920, 150); line(-60, 300, 920, 790); line(-60, 630, 920, 1120); if(frameCount%20>=10) translate(random(10)+mouseX-450,random(20)+mouseY-450); else translate(-random(10)+mouseX-450,-random(20)+mouseY-450); joker(); } else { background(80,193,101); //普通 strokeWeight(140); stroke(222,94,81); line(0, 0, 920, 460); line(500, -60, 920, 150); line(-60, 300, 920, 790); line(-60, 630, 920, 1120); joker(); } } function mousePressed(){ isPressed=!isPressed; } function joker(){ stroke(255); //脸轮廓 strokeWeight(10); fill(255,255,255); beginShape(); vertex(238,421); bezierVertex(184,516,577,607,682,424); bezierVertex(726,330,700,212,685,171); bezierVertex(672,133,650,124,627,95); bezierVertex(593,74,588,60,548,59); bezierVertex(507,47,493,27,447,43); bezierVertex(389,44,347,51,299,104); bezierVertex(294,111,201,152,232,303); bezierVertex(242,349,248,379,238,423); endShape(); stroke(11,49,4); //脸轮廓2 strokeWeight(20); fill(255,255,255); beginShape(); vertex(249,421); bezierVertex(214,512,584,584,667,418); bezierVertex(709,329,696,214,668,168); bezierVertex(657,145,639,122,611,105); bezierVertex(585,83,568,71,546,72); bezierVertex(502,57,495,35,447,59); bezierVertex(386,55,354,57,305,118); bezierVertex(285,116,210,212,249,304); bezierVertex(247,350,268,383,250,419); endShape(); noStroke(); //鬓角 fill(15,146,42); beginShape(); vertex(474,506); bezierVertex(527,489,594,477,621,426); bezierVertex(698,406,632,278,608,404); bezierVertex(601,365,604,356,596,326); bezierVertex(591,305,539,309,568,287); bezierVertex(611,281,668,297,672,196); bezierVertex(711,304,691,513,469,508); endShape(); fill(82,183,15); //顶发 beginShape(); vertex(568,286); bezierVertex(587,287,674,301,674,196); bezierVertex(652,134,558,61,541,79); bezierVertex(499,60,486,47,450,67); bezierVertex(384,67,355,64,313,122); bezierVertex(294,134,297,126,280,147); bezierVertex(251,189,233,257,258,301); endShape(); fill(255,255,255); //额头 beginShape(); vertex(258,307); bezierVertex(261,262,273,258,282,241); bezierVertex(335,253,354,257,374,272); bezierVertex(448,243,486,241,546,253); bezierVertex(559,256,590,263,559,301); endShape(); fill(15,146,42); //发丝1 beginShape(); vertex(287,213); bezierVertex(291,177,289,154,315,122); bezierVertex(340,100,331,101,351,86); bezierVertex(319,124,310,133,300,163); endShape(); beginShape(); //发丝2 vertex(358,252); bezierVertex(341,226,333,206,346,177); bezierVertex(347,193,334,212,357,249); endShape(); beginShape(); //发丝3 vertex(381,180); bezierVertex(386,148,394,137,406,115); bezierVertex(413,101,425,93,433,78); endShape(); beginShape(); //发丝4 vertex(423,245); bezierVertex(426,224,426,221,435,208); bezierVertex(451,196,443,201,459,190); bezierVertex(444,208,446,208,436,220); endShape(); beginShape(); //发丝5 vertex(493,141); bezierVertex(495,127,493,129,497,118); bezierVertex(510,104,508,113,517,104); bezierVertex(506,114,511,110,504,121); endShape(); beginShape(); //发丝6 vertex(565,229); bezierVertex(570,217,577,208,581,203); bezierVertex(603,208,592,205,611,207); bezierVertex(592,211,604,209,584,213); endShape(); fill(101,208,2); //发-圆 ellipse(273,198,10,20); ellipse(310,207,10,15); ellipse(392,209,10,20); ellipse(407,199,8,15); ellipse(527,193,10,20); ellipse(557,180,17,35); ellipse(644,165,10,20); fill(0); //左眼框 beginShape(); vertex(287,404); bezierVertex(262,350,278,369,265,323); bezierVertex(277,336,271,325,296,328); bezierVertex(325,343,325,336,348,385); bezierVertex(334,354,301,331,282,341); bezierVertex(278,354,280,377,289,404); endShape(); beginShape(); //右眼框 vertex(438,406); bezierVertex(443,367,475,327,559,351); bezierVertex(576,349,567,356,582,346); bezierVertex(572,364,566,388,536,433); bezierVertex(561,388,555,397,562,375); bezierVertex(522,344,492,341,453,379); endShape(); fill(108,208,2); //左眼珠 beginShape(); vertex(315,348); bezierVertex(282,347,282,443,334,438); bezierVertex(364,430,346,352,313,346); endShape(); beginShape(); //右眼珠 vertex(513,351); bezierVertex(451,353,473,450,520,441); bezierVertex(553,437,564,349,513,352); endShape(); fill(0); //鼻子 ellipse(360,432,8,12); fill(170,234,40); //左眼内部细节 ellipse(309,416,10,20); fill(46,101,0); ellipse(324,399,12,24); fill(255); ellipse(335,375,10,20); fill(170,234,40); //右眼内部细节 ellipse(497,418,10,20); fill(46,101,0); ellipse(513,397,12,24); fill(255); ellipse(535,372,10,20); fill(187,25,36); //嘴唇 beginShape(); vertex(320,443); bezierVertex(329,477,436,462,450,456); bezierVertex(481,450,462,457,485,445); bezierVertex(453,523,343,502,325,455); endShape(); if(isPressed) { fill(0); textStyle(BOLD); textSize(random(90,100)); text('Hhhhh',500,500); } fill(255); //牙齿 beginShape(); vertex(347,468); bezierVertex(403,481,404,470,446,465); bezierVertex(444,474,445,471,442,481); bezierVertex(409,492,393,491,360,478); endShape(); strokeWeight(2); //牙缝 stroke(0); fill(255); beginShape(); vertex(443,476); bezierVertex(406,485,376,487,346,469); endShape(); line(366,476,365,479); line(384,479,384,483); line(403,479,403,485); line(417,480,418,482); line(432,474,434,477); //白底 noStroke(); //左臂 fill(255); beginShape(); vertex(369,521); bezierVertex(335,564,350,541,280,630); bezierVertex(260,642,248,669,263,687); bezierVertex(287,734,309,714,329,701); bezierVertex(352,679,345,685,355,668); endShape(); beginShape(); //左脚 vertex(342,654); bezierVertex(326,728,308,761,357,794); bezierVertex(360,803,361,796,361,810); bezierVertex(336,831,368,863,398,859); bezierVertex(458,860,444,818,461,771); endShape(); beginShape(); //右脚 vertex(445,755); bezierVertex(442,794,445,775,449,838); bezierVertex(449,877,533,867,545,840); bezierVertex(546,811,543,828,545,800); bezierVertex(606,773,595,750,550,639); endShape(); beginShape(); //右臂 vertex(527,663); bezierVertex(602,595,587,614,627,559); bezierVertex(651,545,661,507,630,480); bezierVertex(617,500,559,514,530,524); bezierVertex(492,523,475,531,415,527); endShape(); beginShape(); //身体 vertex(369,520); bezierVertex(436,531,467,535,487,543); bezierVertex(633,732,536,897,300,667); endShape(); //绿边 fill(11,49,4); beginShape(); vertex(534,636); bezierVertex(590,587,578,600,618,551); bezierVertex(643,531,648,508,611,486); bezierVertex(594,472,573,503,562,524); bezierVertex(548,543,555,532,541,553); endShape(); beginShape(); vertex(533,624); bezierVertex(555,688,552,657,574,748); bezierVertex(583,763,566,774,533,790); bezierVertex(539,835,543,848,491,853); bezierVertex(444,852,461,820,466,819); endShape(); strokeWeight(20); stroke(11,49,4); fill(255); beginShape(); vertex(476,816); bezierVertex(466,790,462,761,449,766); bezierVertex(436,766,435,783,432,816); bezierVertex(418,863,348,840,378,813); bezierVertex(375,788,378,800,372,779); bezierVertex(319,757,351,723,362,635); bezierVertex(332,673,349,655,319,684); bezierVertex(300,708,290,693,280,680); bezierVertex(273,669,276,656,285,648); bezierVertex(356,562,328,597,395,520); bezierVertex(448,514,424,517,502,517); bezierVertex(528,540,520,533,544,557); bezierVertex(567,587,576,585,551,616); bezierVertex(532,640,543,626,527,648); endShape(); strokeWeight(20); stroke(11,49,4); line(540,595,500,660); noStroke(); //脖子 fill(238,211,200); beginShape(); vertex(424,505); bezierVertex(420,517,423,509,421,517); bezierVertex(426,530,449,529,473,520); bezierVertex(479,510,476,518,477,506); endShape(); fill(99,101,178); //衬衫领子 beginShape(); vertex(422,510); bezierVertex(429,535,449,521,476,513); bezierVertex(474,524,474,512,473,525); bezierVertex(450,543,464,531,429,555); bezierVertex(413,531,422,544,409,525); endShape(); stroke(151,255,11); //领带 strokeWeight(9); line(431,523,441,524); strokeWeight(10.5); line(440,525,425,556); strokeWeight(10.5); line(432,524,437,550); stroke(61,54,151); //衬衫领子左边边 strokeWeight(2); beginShape(); vertex(426,521); bezierVertex(424,524,424,528,419,534); endShape(); beginShape(); //衬衫领子右边边 vertex(445,524); bezierVertex(448,533,448,529,449,537); endShape(); noStroke(); //马甲 fill(73,172,90); beginShape(); vertex(411,524); bezierVertex(420,535,417,530,428,552); bezierVertex(451,536,447,540,476,520); bezierVertex(445,558,469,627,482,682); bezierVertex(463,693,472,688,451,697); bezierVertex(429,689,439,692,420,681); bezierVertex(402,690,411,685,392,697); bezierVertex(376,688,382,691,371,682); bezierVertex(384,599,377,629,404,538); endShape(); stroke(44,143,62); //马甲衣襟 strokeWeight(2); beginShape(); vertex(427,551); bezierVertex(422,601,415,638,420,678); endShape(); beginShape(); //马甲左领子 vertex(427,552); bezierVertex(413,545,418,546,404,538); endShape(); beginShape(); //马甲右领子 vertex(427,552); bezierVertex(454,549,443,548,460,548); endShape(); noStroke(); //马甲阴影左侧 fill(15,140,41); beginShape(); vertex(408,519); bezierVertex(406,549,398,553,375,684); bezierVertex(367,674,372,678,364,671); endShape(); beginShape(); //马甲阴影右侧 vertex(470,539); bezierVertex(442,549,453,605,468,684); bezierVertex(480,680,472,682,484,679); endShape(); noStroke(); //马甲扣子 fill(151,255,11); circle(430,564,5); circle(428,590,5); circle(426,614,5); circle(425,636,5); circle(425,657,5); circle(425,678,5); noStroke(); //裆 fill(122,7,136); beginShape(); vertex(429,767); bezierVertex(445,756,452,757,465,764); bezierVertex(463,744,465,755,461,735); bezierVertex(439,731,452,734,431,736); endShape(); noStroke(); //左鞋 fill(93,45,36); beginShape(); vertex(381,809); bezierVertex(371,819,369,822,372,833); bezierVertex(382,848,416,842,422,835); bezierVertex(429,818,428,826,429,807); endShape(); beginShape(); //右鞋 vertex(479,812); bezierVertex(472,822,467,834,471,841); bezierVertex(489,844,509,844,524,837); bezierVertex(533,826,526,824,519,799); endShape(); noStroke(); //裤子 fill(157,97,192); beginShape(); vertex(367,682); bezierVertex(383,694,374,685,389,699); bezierVertex(410,688,396,696,420,683); bezierVertex(441,694,439,693,450,698); bezierVertex(464,689,474,686,505,675); bezierVertex(520,776,518,739,523,810); bezierVertex(496,815,510,813,478,816); bezierVertex(458,765,471,789,458,745); bezierVertex(443,738,447,739,437,746); bezierVertex(431,785,432,768,428,816); bezierVertex(397,820,410,819,378,819); bezierVertex(362,753,372,793,360,734); endShape(); stroke(130,70,160); //裤子条纹 strokeWeight(2); beginShape(); vertex(379,691); bezierVertex(376,738,374,765,385,818); endShape(); beginShape(); vertex(389,696); bezierVertex(381,734,386,763,392,818); endShape(); beginShape(); vertex(398,695); bezierVertex(403,734,395,768,399,818); endShape(); beginShape(); vertex(410,689); bezierVertex(413,733,407,769,408,817); endShape(); beginShape(); vertex(429,691); bezierVertex(428,733,423,770,421,817); endShape(); beginShape(); vertex(439,692); bezierVertex(440,709,439,722,441,743); endShape(); beginShape(); vertex(451,694); bezierVertex(451,709,452,723,453,742); endShape(); beginShape(); vertex(458,693); bezierVertex(459,722,467,762,484,815); endShape(); beginShape(); vertex(467,690); bezierVertex(473,724,477,771,492,815); endShape(); beginShape(); vertex(474,686); bezierVertex(485,726,494,768,506,813); endShape(); beginShape(); vertex(508,771); bezierVertex(510,788,512,802,515,811); endShape(); beginShape(); vertex(515,770); bezierVertex(518,787,520,798,522,802); endShape(); colorMode(RGB, 255, 255, 255, 1); //裤子阴影 noStroke(); fill(102,52,101,0.6); beginShape(); vertex(499,673); bezierVertex(475,680,481,678,470,685); bezierVertex(485,739,481,709,496,791); bezierVertex(507,796,512,795,523,792); endShape(); stroke(110,35,127); //马甲下摆 strokeWeight(8); line(370,680,390,698); line(390,698,420,683); line(420,683,450,695); line(450,695,484,682); noStroke(); //左手 fill(242,212,197); beginShape(); vertex(287,667); bezierVertex(282,662,276,672,286,683); bezierVertex(299,697,310,689,304,683); endShape(); beginShape(); //右手 vertex(589,533); bezierVertex(572,509,594,484,614,496); bezierVertex(646,520,612,543,592,536); endShape(); noStroke(); //左风衣 fill(154,52,162); beginShape(); vertex(417,516); bezierVertex(397,513,404,517,389,523); bezierVertex(332,596,374,543,279,661); bezierVertex(296,683,287,675,310,692); bezierVertex(354,646,333,673,368,627); bezierVertex(345,720,321,758,374,779); bezierVertex(364,680,385,596,405,537); endShape(); beginShape(); //右风衣 vertex(475,515); bezierVertex(494,519,486,516,499,525); bezierVertex(529,541,512,527,545,562); bezierVertex(568,529,558,541,582,513); bezierVertex(587,530,597,542,623,530); bezierVertex(596,564,580,576,559,608); bezierVertex(545,629,532,633,519,623); bezierVertex(538,679,546,699,559,755); bezierVertex(547,770,533,778,507,783); bezierVertex(493,718,455,640,461,549); endShape(); stroke(122,20,130); //风衣右衣襟上 strokeWeight(2); beginShape(); vertex(478,516); bezierVertex(485,526,483,521,491,535); bezierVertex(481,551,486,545,473,563); endShape(); beginShape(); //风衣右衣襟下 vertex(463,550); bezierVertex(484,581,473,565,495,594); bezierVertex(477,650,491,612,474,663); endShape(); beginShape(); //风衣左衣襟上 vertex(398,517); bezierVertex(384,532,393,523,380,537); bezierVertex(381,553,380,547,383,563); endShape(); beginShape(); //风衣左衣襟下 vertex(397,555); bezierVertex(370,571,386,560,362,580); bezierVertex(364,602,370,625,376,647); endShape(); } function keyPressed() { if (keyCode == 32) //space isChangeColor=!isChangeColor; } </script> </body> </html>