canvas绘制一个风格化的小狗图像效果代码
代码语言：html
所属分类：布局界面
代码描述：canvas绘制一个风格化的小狗图像效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
box-sizing: border-box;
overflow: hidden;
}
body {
background: #0C2A78;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
body canvas {
box-shadow: 0.2em 0.2em 5em #0008;
border: none;
outline: none;
border: solid 2em #fff;
}
</style>
</head>
<body >
<canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/processing.min.js"></script>
<script >
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(600, 600);
frameRate(60);
smooth();
var Puppy = function (config) {
this.x = config.x || 0;
this.y = config.y || 0;
this.scale = config.scale || 1;
this.drawBodyHead = function () {
//Head and Body
fill(124, 59, 15);
beginShape();
vertex(58, 50);
vertex(120, 100);
vertex(170, 15);
endShape(CLOSE);
fill(113, 62, 29);
beginShape();
vertex(58, 50);
vertex(47, 147);
vertex(120, 100);
endShape(CLOSE);
fill(132, 72, 36);
beginShape();
vertex(47, 147);
vertex(63, 240);
vertex(120, 100);
endShape(CLOSE);
fill(152, 84, 44);
beginShape();
vertex(63, 240);
vertex(105, 225);
vertex(120, 100);
endShape(CLOSE);
fill(170, 96, 48);
beginShape();
vertex(105, 225);
vertex(140, 160);
vertex(120, 100);
endShape(CLOSE);
fill(182, 104, 50);
beginShape();
vertex(140, 160);
vertex(180, 90);
vertex(120, 100);
endShape(CLOSE);
fill(166, 100, 52);
beginShape();
vertex(120, 100);
vertex(180, 90);
vertex(170, 15);
endShape(CLOSE);
fill(156, 88, 39);
beginShape();
vertex(180, 90);
vertex(260, 30);
vertex(170, 15);
endShape(CLOSE);
fill(191, 139, 93);
beginShape();
vertex(180, 90);
vertex(320, 70);
vertex(260, 30);
endShape(CLOSE);
fill(195, 142, 97);
beginShape();
vertex(180, 90);
vertex(270, 120);
vertex(320, 70);
endShape(CLOSE);
fill(193, 139, 91);
beginShape();
vertex(180, 90);
vertex(200, 160);
vertex(270, 120);
endShape(CLOSE);
fill(125, 77, 41);
beginShape();
vertex(140, 160);
vertex(180, 90);
vertex(200, 160);
endShape(CLOSE);
fill(156, 108, 64);
beginShape();
vertex(140, 160);
vertex(200, 160);
vertex(140, 190);
endShape(CLOSE);
fill(149, 99, 60);
beginShape();
vertex(140, 190);
vertex(200, 160);
vertex(220, 210);
endShape(CLOSE);
fill(171, 111, 62);
beginShape();
vertex(200, 160);
vertex(220, 210);
vertex(240, 138);
endShape(CLOSE);
fill(174, 113, 71);
beginShape();
vertex(240, 138);
vertex(220, 210);
vertex(260, 160);
endShape(CLOSE);
fill(198, 140, 86);
beginShape();
vertex(240, 138);
vertex(260, 160);
vertex(270, 120);
endShape(CLOSE);
fill(136, 86, 43);
beginShape();
vertex(140, 190);
vertex(120, 250);
vertex(220, 210);
endShape(CLOSE);
fill(146, 90, 51);
beginShape();
vertex(120, 250);
vertex(160, 270);
vertex(220, 210);
endShape(CLOSE);
fill(150, 124, 96);
beginShape();
vertex(120, 250);
vertex(123, 310);
vertex(160, 270);
endShape(CLOSE);
fill(182, 130, 87);
beginShape();
vertex(260, 30);
vertex(320, 70);
vertex(340, 60);
endShape(CLOSE);
fill(189, 139, 96);
beginShape();
vertex(320, 70);
vertex(340, 60);
vertex(420, 100);
endShape(CLOSE);
fill(181, 113, 63);
beginShape();
vertex(320, 70);
vertex(420, 100);
vertex(420, 190);
endShape(CLOSE);
fill(212, 168, 119);
beginShape();
vertex(320, 70);
vertex(323, 133);
vertex(420, 190);
endShape(CLOSE);
fill(205, 172, 136);
beginShape();
vertex(323, 133);
vertex(360, 185);
vertex(420, 190);
endShape(CLOSE);
fill(172, 109, 57);
beginShape();
vertex(323, 133);
vertex(290, 190);
vertex(360, 185);
endShape(CLOSE);
fill(171, 115, 78);
beginShape();
vertex(290, 190);
vertex(360, 230);
vertex(360, 185);
endShape(CLOSE);
fill(175, 121, 74);
beginShape();
vertex(360, 185);
vertex(360, 230);
vertex(420, 190);
endShape(CLOSE);
fill(171, 115, 78);
beginShape();
vertex(290, 190);
vertex(300, 260);
vertex(360, 230);
endShape(CLOSE);
fill(151, 109, 69);
beginShape();
vertex(300, 260);
vertex(410, 290);
vertex(360, 230);
endShape(CLOSE);
fill(176, 120, 72);
beginShape();
vertex(360, 230);
vertex(410, 290);
vertex(420, 190);
vertex(420, 190);
endShape(CLOSE);
fill(152, 83, 39);
beginShape();
vertex(420, 190);
vertex(420, 100);
vertex(520, 150);
endShape(CLOSE);
fill(163, 89, 41);
beginShape();
vertex(520, 150);
vertex(480, 240);
vertex(420, 190);
endShape(CLOSE);
fill(143, 78, 35);
beginShape();
vertex(420, 190);
vertex(410, 290);
vertex(480, 240);
endShape(CLOSE);
fill(144, 76, 31);
beginShape();
vertex(480, 240);
vertex(520, 150);
vertex(560, 260);
endShape(CLOSE);
fill(137, 77, 31);
beginShape();
vertex(480, 240);
vertex(560, 260);
vertex(500, 370);
endShape(CLOSE);
fill(127, 67, 29);
beginShape();
vertex(500, 370);
vertex(480, 240);
vertex(410, 290);
endShape(CLOSE);
fill(173, 114, 69);
beginShape();
vertex(410, 290);
vertex(370, 340);
vertex(300, 260);
endShape(CLOSE);
fill(181, 121, 74);
beginShape();
vertex(300, 260);
vertex(290, 330);
vertex(370, 340);
endShape(CLOSE);
fill(189, 147, 106);
beginShape();
vertex(370, 340);
vertex(290, 330);
vertex(290, 390);
endShape(CLOSE);
fill(105, 61, 23);
beginShape();
vertex(290, 390);
vertex(370, 340);
vertex(310, 430);
endShape(CLOSE);
fill(85, 47, 17);
beginShape();
vertex(310, 430);
vertex(410, 370);
vertex(370, 340);
endShape(CLOSE);
fill(74, 39, 14);
beginShape();
vertex(370, 340);
vertex(410, 290);
vertex(410, 370);
endShape(CLOSE);
fill(105, 57, 25);
beginShape();
vertex(410, 370);
vertex(410, 450);
vertex(310, 430);
endShape(CLOSE);
fill(131, 75, 36);
beginShape();
vertex(410, 450);
vertex(410, 370);
vertex(470, 440);
endShape(CLOSE);
fill(168, 97, 45);
beginShape();
vertex(410, 450);
vertex(500, 500);
vertex(470, 440);
endShape(CLOSE);
fill(180, 102, 48);
beginShape();
vertex(410, 450);
vertex(420, 540);
vertex(500, 500);
endShape(CLOSE);
fill(199, 113, 52);
beginShape();
vertex(500, 500);
vertex(420, 540);
vertex(520, 570);
endShape(CLOSE);
fill(228, 131, 65);
beginShape();
vertex(520, 570);
vertex(540, 598);
vertex(500, 598);
endShape(CLOSE);
fill(218, 123, 62);
beginShape();
vertex(500, 598);
vertex(520, 570);
vertex(420, 540);
endShape(CLOSE);
fill(218, 130, 64);
beginShape();
vertex(420, 540);
vertex(500, 598);
vertex(440, 598);
endShape(CLOSE);
fill(160, 91, 41);
beginShape();
vertex(420, 540);
vertex(380, 598);
vertex(320, 540);
endShape(CLOSE);
fill(139, 77, 35);
beginShape();
vertex(320, 540);
vertex(420, 540);
vertex(410, 450);
endShape(CLOSE);
fill(120, 66, 30);
beginShape();
vertex(410, 450);
vertex(320, 540);
vertex(310, 430);
endShape(CLOSE);
fill(178, 100, 48);
beginShape();
vertex(320, 540);
vertex(380, 598);
vertex(310, 598);
endShape(CLOSE);
fill(207, 197, 179);
beginShape();
vertex(310, 598);
vertex(220, 598);
vertex(210, 580);
endShape(CLOSE);
fill(150, 84, 39);
beginShape();
vertex(210, 580);
vertex(220, 598);
vertex(130, 599);
endShape(CLOSE);
fill(211, 196, 180);
beginShape();
vertex(210, 580);
vertex(310, 598);
vertex(320, 540);
endShape(CLOSE);
fill(183, 172, 155);
beginShape();
vertex(320, 540);
vertex(200, 520);
vertex(210, 580);
endShape(CLOSE);
fill(123, 67, 28);
beginShape();
vertex(210, 580);
vertex(130, 598);
vertex(200, 520);
endShape(CLOSE);
fill(113, 63, 25);
beginShape();
vertex(200, 520);
vertex(130, 598);
vertex(130, 530);
endShape(CLOSE);
fill(78, 49, 24);
beginShape();
vertex(130, 530);
vertex(200, 520);
vertex(180, 400);
endShape(CLOSE);
fill(95, 50, 18);
beginShape();
vertex(180, 400);
vertex(220, 410);
vertex(200, 520);
endShape(CLOSE);
fill(155, 136, 112);
beginShape();
vertex(200, 520);
vertex(320, 540);
vertex(310, 430);
endShape(CLOSE);
fill(149, 139, 121);
beginShape();
vertex(310, 430);
vertex(200, 520);
vertex(220, 410);
endShape(CLOSE);
fill(156, 143, 128);
beginShape();
vertex(220, 410);
vertex(310, 430);
vertex(250, 390);
endShape(CLOSE);
fill(156, 143, 128);
beginShape();
vertex(250, 390);
vertex(310, 430);
vertex(290, 390);
endShape(CLOSE);
fill(108, 61, 25);
beginShape();
vertex(220, 410);
vertex(250, 390);
vertex(180, 400);
endShape(CLOSE);
fill(177, 100, 48);
beginShape();
vertex(420, 540);
vertex(440, 598);
vertex(380, 598);
endShape(CLOSE);
fill(186, 182, 171);
beginShape();
vertex(180, 400);
vertex(200, 380);
vertex(250, 390);
endShape(CLOSE);
fill(108, 107, 92);
beginShape();
vertex(250, 390);
vertex(200, 380);
vertex(220, 340);
endShape(CLOSE);
fill(185, 177, 167);
beginShape();
vertex(220, 340);
vertex(250, 390);
vertex(290, 390);
endShape(CLOSE);
fill(181, 114, 104);
beginShape();
vertex(193, 364);
vertex(200, 380);
vertex(170, 370);
endShape(CLOSE);
fill(119, 116, 98);
beginShape();
vertex(200, 380);
vertex(193, 363);
vertex(220, 340);
endShape(CLOSE);
fill(109, 110, 95);
beginShape();
vertex(193, 363);
vertex(180, 320);
vertex(170, 370);
endShape(CLOSE);
fill(105, 92.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0