canvas绘制一个风格化的小狗图像效果代码

代码语言:html

所属分类:布局界面

代码描述:canvas绘制一个风格化的小狗图像效果代码

代码标签: 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);
   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0