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); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0