canvas实现一个机器猫走路动画效果代码
代码语言：html
所属分类：动画
代码描述：canvas实现一个机器猫走路动画效果代码，结合了processing.js
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
box-sizing: border-box;
overflow: hidden;
}
body {
background: #5530AB;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
body canvas {
border: none;
outline: none;
}
</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 RoboCat = (function() {
RoboCat = function(args) {
this.x = args.x || 0;
this.y = args.y || 0;
this.timer = 0;
this.rot_timer = 0;
this.speed = 2;
this.shake = 0;
this.shakedown = 0.1;
this.colors = args.colors || {
light: color(242, 239, 242),
dark: color(33, 33, 33),
side: color(182, 101, 235),
accent: color(93, 227, 209),
accentRGB: [93, 227, 209]
};
this.body = {
x: 0,
y: 0,
angle: 0,
timer: 40,
xoff: 0
};
this.arms = {
right: {
joint1: 0,
joint2: 0,
finger1: 0,
finger2: 0,
finger3: 0,
joint1t: 0,
joint2t: 0
},
left: {
xoff: {
value: 0,
target: 0,
timer: 0,
delay: {
value: 0,
min: 30,
max: 120
}
},
yoff: {
value: 0,
target: 0,
timer: 0,
delay: {
value: 0,
min: 30,
max: 120
}
}
}
};
this.legs = {
right: {
x1: 423,
y1: 393,
x2: 400,
y2: 400,
x3: 416,
y3: 502,
l1: 67,
l2: 60,
vx3: 0,
vy3: 0
},
left: {
x1: 423,
y1: 393,
x2: 400,
y2: 400,
x3: 416,
y3: 502,
l1: 67,
l2: 60,
vx3: 0,
vy3: 0
}
};
this.eye = {
show: true,
timer: 0,
delay: {
value: 60,
min: 60,
max: 240
}
};
this.state = 0;
this.change = 0;
this.fire = {
state: 0, //0 = normal, 1 = heating up, 2 = blast
opacity: 0,
timer: 0,
fired: false,
bullets: [],
smokes: []
};
};
RoboCat.prototype = {
//Credit to JentGent for this function
joint: function(Ax, Ay, Bx, By, b, c, v) {
var t = atan2(By - Ay, Bx - Ax);
var a = dist(Ax, Ay, Bx, By);
var f = acos(((Bx - Ax) * (Bx - Ax) + (By - Ay) * (By - Ay) + (c * c) - (b * b)) / (2 * a * b)) || 0;
var Cx = Ax + cos(t + f * v) * c || 0,
Cy = Ay + sin(t + f * v) * c || 0;
return {x: Cx, y: Cy};
},
draw: function() {
pushMatrix();
translate(0, this.body.y);
{
//back of ears
noStroke();
fill(this.colors.dark);
beginShape();
vertex(285, 118);
bezierVertex(311, 130, 329, 153, 340, 182);
vertex(285, 182);
endShape(CLOSE);
beginShape();
vertex(371, 118);
bezierVertex(398, 130, 415, 153, 430, 182);
vertex(371, 182);
endShape(CLOSE);
//front of ears
noStroke();
fill(this.colors.light);
beginShape();
vertex(242, 182);
vertex(264, 126);
bezierVertex(273, 112, 286, 112, 296, 126);
vertex(317, 182);
endShape(CLOSE);
beginShape();
vertex(330, 182);
vertex(350, 129);
bezierVertex(359, 112, 374, 112, 382, 127);
vertex(404, 182);
endShape(CLOSE);
//inner ears
noFill();
stroke(this.colors.accent);
strokeWeight(2);
beginShape();
vertex(257, 182);
vertex(269, 146);
bezierVertex(276, 133, 284, 133, 291, 146);
vertex(304, 182);
endShape(CLOSE);
beginShape();
vertex(343, 182);
vertex(356, 146);
bezierVertex(364, 133, 370, 133, 377, 146);
vertex(390, 182);
endShape(CLOSE);
} //ears
{
//handle on back of body
noFill();
stroke(this.colors.accent);
strokeWeight(2);
beginShape();
vertex(444, 195);
vertex(464, 200);
bezierVertex(473, 200, 478, 206, 480, 213);
vertex(495, 266);
bezierVertex(497, 272, 498, 280, 494, 286);
vertex(476, 305);
endShape(CLOSE);
} //handle on back of body
{
//RIGHT LEG
pushMatrix();
translate(-145, 0); //move to the right (right leg)
translate(0, -this.body.y);
//lower leg on right
noFill();
strokeWeight(26);
stroke(this.colors.dark);
line( this.legs.right.x2,
this.legs.right.y2,
this.legs.right.x3 + this.legs.right.vx3,
this.legs.right.y3 + this.legs.right.vy3);
strokeWeight(1);
//TOP PART OF LEG
pushMatrix();
noFill();
strokeWeight(26);
stroke(this.colors.dark);
line( this.legs.right.x1,
this.legs.right.y1 + this.body.y,
this.legs.right.x2,
this.legs.right.y2);
strokeWeight(1);
popMatrix();
pushMatrix();
translate(0, this.body.y);
translate(this.legs.right.x1, this.legs.right.y1);
rotate(radians(50) + atan2((this.legs.right.y1 + this.body.y) - this.legs.right.y2, this.legs.right.x1 - this.legs.right.x2));
translate(-this.legs.right.x1, -this.legs.right.y1);
// top of leg on right
noStroke();
fill(this.colors.light);
beginShape();
vertex(375, 472);
bezierVertex(333, 474, 311, 443, 331, 412);
vertex(388, 366);
bezierVertex(402, 359, 413, 359, 435, 363);
endShape(CLOSE);
//leg on right
noStroke();
fill(this.colors.side);
beginShape();
vertex(408, 367);
bezierVertex(447, 348, 475, 386, 455, 417);
vertex(388, 469);
bezierVertex(357, 482, 329, 446, 347, 419);
endShape(CLOSE);
//arc behind leg
noFill();
stroke(this.colors.dark);
strokeWeight(2);
bezier(412, 365, 449, 351, 459, 380, 462, 393);
//circle on leg on right
noFill();
stroke(this.colors.accent);
strokeWeight(2);
ellipse(376, 437, 25, 25);
popMatrix();
pushMatrix();
translate(this.legs.right.x3 + this.legs.right.vx3, this.legs.right.y3 + this.legs.right.vy3);
rotate(radians(sin(radians(this.timer * 2))) * -1);
translate(-this.legs.right.x3, -this.legs.right.y3 + 10);
//curve on top of foot on right
noStroke();
fill(this.colors.side);
bezier(374, 495, 399, 476, 437, 476, 457, 495);
//front of foot on right
noStroke();
fill(this.colors.light);
beginShape();
vertex(362, 491);
vertex(292, 491);
bezierVertex(278, 495, 278, 514, 292, 518);
vertex(362, 518);
endShape(CLOSE);
//lines on front of foot on right
noFill();
stroke(this.colors.dark);
strokeWeight(2);
line(354, 495, 285, 495);
line(352, 505, 283, 505);
line(356, 514, 288, 514);
//foot on right
noStroke();
fill(this.colors.side);
beginShape();
vertex(362, 491);
vertex(481, 492);
bezierVertex(498, 493, 498, 518, 483, 518);
vertex(362, 518);
bezierVertex(344, 518, 344, 493, 362, 491);
endShape(CLOSE);
//line on top of foot on right
noFill();
stroke(this.colors.dark);
strokeWeight(2);
line(370, 492, 464, 492);
//line on foot on right
noFill();
strokeWeight(3);
stroke(this.colors.accent);
line(362, 505, 480, 505);
strokeWeight(1);
//circles on line on foot on right
noStroke();
fill(this.colors.dark);
ellipse(362, 505, 10, 10);
ellipse(480, 505, 10, 10);
//thin line on foot on right
noFill();
stroke(this.colors.accent);
strokeWeight(2);
line(362, 505, 480, 505);
popMatrix();
popMatrix();
} //right leg
{
//back (behind) of body
noStroke();
fill(this.colors.dark);
beginShape();
vertex(459, 231);
bezierVertex(471, 233, 475, 237, 478, 243);
vertex(495, 301);
bezierVertex(496, 307, 493, 316, 487, 324);
endShape(CLOSE);
//blue section under dark section under body
noStroke();
fill(this.colors.dark);
beginShape();
vertex(284, 376);
bezierVertex(288, 399, 305, 411, 337, 408);
vertex(410, 406);
vertex(419, 376);
endShape(CLOSE);
//dark section under body
noStroke();
fill(this.colors.dark);
beginShape();
vertex(240, 365);
bezierVertex(240, 377, 242, 384, 255, 386);
vertex(388, 384);
bezierVertex(400, 382, 401, 374, 402, 365);
endShape(CLOSE);
//antenna straight
noFill();
stroke(this.colors.dark);
strokeWeight(2);
line(420, 177, 420, 89);
noStroke();
fill(this.colors.side);
ellipse(420, 89, 10, 10);
//antenna jagged
noFill();
stroke(this.colors.dark);
strokeWeight(2);
beginShape();
vertex(430, 178);
vertex(430, 134);
vertex(425, 125);
vertex(436, 121);
vertex(430, 117);
vertex(430, 109);
endShape();
} //body / antenna
{
//FIRING ARM
pushMatrix();
translate(this.arms.left.xoff.value, this.arms.left.yoff.value);
if(this.shake > 0) {
this.shake = lerp(this.shake, 0, this.shakedown);
translate(round(random(-this.shake, this.shake)), round(random(-this.shake, this.shake)));
}
//arm
noStroke();
fill(this.colors.dark);
beginShape();
vertex(235, 228);
vertex(155, 228);
vertex(155, 350);
vertex(235, 350);
endShape(CLOSE);
//lines on arm
noFill();
stroke(this.colors.accent);
strokeWeight(2);
line(162, 250, 234, 250);
bezier(193, 250, 193, 263, 193, 278, 229, 287);
//arm oval back
noStroke();
fill(this.colors.side);
beginShape();
vertex(115, 203);
vertex(142, 203);
bezierVertex(167, 206, 180, 222, 178, 236);
vertex(178, 348);
bezierVertex(173, 369, 160, 375, 143, 378);
vertex(115, 378);
endShape(CLOSE);
//arm oval outer
noStroke();
fill(this.colors.light);
beginShape();
vertex(144, 228);
vertex(144, 353);
bezierVertex(137, 387, 88, 387, 80, 353);
vertex(80, 228);
bezierVertex(90, 195, 137, 195, 144, 228);
endShape(CLOSE);
//arm oval inner
noStroke();
fill(this.colors.dark);
beginShape();
vertex(131, 230);
vertex(131, 349);
bezierVertex(127, 373, 97, 373, 92, 349);
vertex(92, 230);
bezierVertex(97, 210, 127, 210, 131, 230);
endShape(CLOSE);
fill(this.colors.accent, this.fire.opacity);
beginShape();
vertex(131, 230);
vertex(131, 349);
bezierVertex(127, 373, 97, 373, 92, 349);
vertex(92, 230);
bezierVertex(97, 210, 127, 210, 131, 230);
endShape(CLOSE);
//handle on top of arm
noFill();
stroke(this.colors.dark);
strokeWeight(2);
line(120, 192, 139, 192);
noFill();
stroke(this.colors.accent);
bezier(115, 205, 115, 199, 113, 194, 119, 192);
bezier(139, 191, 143, 193, 144, 197, 144, 203);
//handle on bottom of arm
noFill();
stroke(this.colors.dark);
strokeWeight(2);
line(120, 385, 139, 385);
noFill();
stroke(this.colors.accent);
bezier(114, 376, 114, 381, 116, 385, 118, 385);
bezier(138, 385, 142, 385, 144, 382, 144, 376);
//line on side of arm top
noFill();
stroke(this.colors.accent);
strokeWeight(2);
beginShape();
vertex(155, 207);
vertex(155, 213);
bezierVertex(156, 222, 161, 222, 165, 230);
vertex(165, 262);
endShape();
ellipse(165, 262, 12, 12);
//line on side of arm bottom
noFill();
stroke(this.colors.accent);
strokeWeight(2);
beginShape();
vertex(162, 370);
vertex(162, 350);
bezierVertex(160, 341, 156, 342, 153, 330);
vertex(153, 300);
endShape();
ellipse(153, 300, 12, 12);
popMatrix();
} //firing arm
{
//side of body
noStroke();
fill(this.colors.side);
beginShape();
vertex(401, 173);
vertex(424, 173);
bezierVertex(442, 173, 451, 183, 455, 199);
vertex(496, 335);
bezierVertex(499, 355, 486, 375, 456, 372);
vertex(342, 372);
endShape(CLOSE);
//front of body
noStroke();
fill(this.colors.light);
beginShape();
vertex(401 + this.body.xoff, 173);
vertex(342 + this.body.xoff, 372);
vertex(212, 372);
bezierVertex(186, 372, 174, 352, 180, 333);
vertex(219, 197);
bezierVertex(226, 177, 240, 171, 253, 173);
endShape(CLOSE);
//line on top of body
noFill();
stroke(this.colors.dark);
strokeWeight(2);
line(242, 172, 415, 172);
pushMatrix();
translate(this.body.xoff, 0);
//face (circle)
strokeWeight(3);
stroke(this.colors.accent);
fill(this.colors.dark);
beginShape();
vertex(294, 207);
bezierVertex(335, 208, 359, 242, 351, 281);
bezierVertex(341, 322, 302, 351, 262, 347);
bezierVertex(229, 344, 203, 306, 215, 265);
bezierVertex(227, 232, 257, 205, 294, 207);
endShape(CLOSE);
strokeWeight(1);
//circles on body for arms
noFill();
stroke(this.colors.accent);
strokeWeight(2);
ellipse(420, 308, 55, 55);
noStroke();
fill(this.colors.light);
ellipse(420, 308, 35, 35);
//lines on side of body
noFill();
stroke(this.colors.dark);
line(471, 287, 483, 328);
line(466, 287, 473, 313);
//lines on top of face
noFill();
stroke(this.colors.dark);
strokeWeight(2);
line(356, 180, 390, 180);
line(369, 187, 386, 187);
//lines on bottom/left of face
noFill();
stroke(this.colors.dark);
strokeWeight(2);
line(320, 350, 340, 350);
rect(300, 355, 38, 10, 50);
//line on top/left of face
noFill();
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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