canvas实现fj40越野车行驶在凹凸山坡路面动画效果代码
代码语言：html
所属分类：动画
代码描述：canvas实现fj40越野车行驶在凹凸山坡路面动画效果代码
代码标签： canvas fj40 越野车 行驶 凹凸 山坡 路面 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
box-sizing: border-box;
overflow: hidden;
}
body {
background: #77A1D1;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
body canvas {
box-shadow: 0.2em 0.2em 2em #0008;
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 road, truck;
var keys = [];
keyPressed = function() {
keys[keyCode] = true;
};
keyReleased = function() {
keys[keyCode] = false;
};
var collision = function(wheel, track) {
return dist(wheel.x, wheel.y, track.x, track.y) < wheel.diameter / 2;
};
var Truck = (function() {
Truck = function(args) {
this.x = args.x || 300;
this.y = args.y || 200;
this.w = args.w || 150;
this.h = args.h || 100;
this.vx = args.vx || 0;
this.vy = args.vy || 0;
this.gravity = args.gravity || 0.2;
this.angle = 0;
this.speed = {
value: 7,
min: 0,
max: 20
};
this.wheels = [
{
x: this.x - this.w * 0.5,
y: this.y,
diameter: 57,
circumference: PI * 58,
angle: 0,
vx: 0,
vy: 0
},
{
x: this.x + this.w * 0.5,
y: this.y,
diameter: 58,
circumference: PI * 58,
angle: 0,
vx: 0,
vy: 0
}
];
this.colors = {
outline: color(55, 35, 25),
body: color(250, 175, 65),
roof: color(255, 255, 255),
guards: color(80, 70, 85),
carriage: color(60, 50, 50),
accent: color(230, 80, 60),
windows: color(50, 50, 50, 20)
};
this.truckImage = this.getTruck();
this.wheelImage = this.getWheel();
};
Truck.prototype = {
getTruck: function() {
background(0, 0, 0, 0);
//curve brace under carriage
stroke(this.colors.outline);
strokeWeight(3);
noFill();
beginShape();
vertex(380, 342);
bezierVertex(380, 352, 375, 359, 366, 361);
vertex(280, 361);
bezierVertex(272, 359, 267, 352, 266, 342);
endShape();
//front bumper
noStroke();
fill(this.colors.outline);
rect(454, 326, 73, 16);
//line under front bumper
stroke(this.colors.outline);
noFill();
beginShape();
vertex(517, 336);
vertex(517, 349);
vertex(451, 363);
endShape();
//under carriage
stroke(this.colors.guards);
line(124, 337, 160, 337);
stroke(this.colors.outline);
fill(this.colors.carriage);
beginShape();
vertex(501, 271);
vertex(502, 300);
vertex(464, 347);
vertex(163, 347);
vertex(125, 314);
vertex(124, 269);
vertex(500, 271);
endShape(CLOSE);
rect(307, 330, 29, 30);
//springs
stroke(this.colors.accent);
for(var i = 0; i < 10; i++) {
//rear
line(191, 287 + i * 5, 206, 292 + i * 5);
//front
line(441, 287 + i * 5, 456, 292 + i * 5);
}
//spash guards
stroke(this.colors.outline);
fill(this.colors.guards);
beginShape();
vertex(120, 269);
vertex(501, 269);
vertex(502, 298);
vertex(492, 292);
bezierVertex(486, 289, 482, 289, 474, 288);
vertex(431, 288);
bezierVertex(423, 289, 418, 292, 414, 296);
vertex(380, 333);
vertex(263, 333);
vertex(237, 299);
bezierVertex(232, 293, 227, 293, 221, 293);
vertex(181, 293);
bezierVertex(173, 293, 169, 297, 166, 300);
vertex(151, 319);
vertex(120, 319);
endShape(CLOSE);
//circles on splash guard
noStroke();
fill(0);
ellipse(490, 286, 5, 5);
ellipse(476, 283, 5, 5);
ellipse(457, 283, 5, 5);
ellipse(439, 283, 5, 5);
ellipse(420, 284, 5, 5);
ellipse(408, 294, 5, 5);
ellipse(398, 304, 5, 5);
ellipse(388, 315, 5, 5);
ellipse(378, 326, 5, 5);
ellipse(265, 328, 5, 5);
ellipse(257, 317, 5, 5);
ellipse(249, 306, 5, 5);
ellipse(241, 296, 5, 5);
ellipse(231, 286, 5, 5);
ellipse(216, 285, 5, 5);
ellipse(202, 285, 5, 5);
ellipse(185, 285, 5, 5);
ellipse(170, 287, 5, 5);
ellipse(159, 297, 5, 5);
ellipse(150, 308, 5, 5);
//inside of cabin
noStroke();
fill(this.colors.outline, 100);
beginShape();
vertex(119, 187);
vertex(142, 187);
vertex(142, 199);
vertex(126, 199);
vertex(126, 246);
vertex(119, 246);
endShape(CLOSE);
beginShape();
vertex(236, 246);
vertex(236, 199);
vertex(164, 199);
vertex(164, 246);
vertex(144, 246);
vertex(144, 187);
vertex(250, 187);
vertex(250, 246);
endShape(CLOSE);
beginShape();
vertex(340, 246);
vertex(327, 199);
vertex(278, 199);
vertex(278, 246);
vertex(263, 246);
vertex(263, 187);
vertex(339, 187);
vertex(356, 246);
endShape(CLOSE);
//steering wheel
stroke(this.colors.outline);
strokeWeight(5);
line(334, 227, 326, 246);
//streaks on windows
noStroke();
fill(255, 100);
quad(185, 186, 240, 245, 218, 245, 163, 186);
quad(156, 186, 211, 245, 205, 245, 150, 186);
quad(296, 186, 351, 245, 328, 245, 273, 186);
quad(269, 186, 324, 245, 318, 245, 263, 186);
//windows (all)
noStroke();
fill(this.colors.windows);
quad(118, 184, 340, 184, 355, 247, 118, 247);
//roof
strokeWeight(3);
stroke(this.colors.outline);
fill(this.colors.roof);
beginShape();
vertex(349, 184);
bezierVertex(347, 176, 341, 173, 332, 172);
vertex(138, 171);
bezierVertex(126, 172, 119, 177, 119, 184);
endShape(CLOSE);
//main body
strokeWeight(3);
stroke(this.colors.outline);
fill(this.colors.body);
beginShape();
vertex(364, 241);
vertex(349, 183);
vertex(331, 183);
vertex(331, 188);
bezierVertex(334, 188, 339, 192, 339, 196);
vertex(348, 233);
bezierVertex(348, 237, 346, 240, 342, 242);
vertex(274, 242);
bezierVertex(268, 241, 267, 237, 267, 232);
vertex(268, 197);
bezierVertex(270, 190, 273, 189, 280, 188);
vertex(331, 188);
vertex(331, 183);
vertex(240, 183);
vertex(239, 188);
bezierVertex(246, 192, 246, 195, 247, 199);
vertex(247, 234);
bezierVertex(247, 236, 246, 240, 238, 243);
vertex(160, 243);
bezierVertex(155, 242, 151, 239, 150, 234);
vertex(150, 199);
bezierVertex(149, 196, 152, 191, 160, 188);
vertex(239, 188);
vertex(239, 183);
vertex(118, 183);
vertex(118, 186);
vertex(127, 186);
bezierVertex(135, 189, 137, 192, 138, 199);
vertex(138, 234);
bezierVertex(136, 240, 132, 242, 126, 243);
vertex(118, 243);
vertex(118, 319);
vertex(132, 319);
vertex(158, 287);
bezierVertex(162, 282, 169, 279, 179, 278);
vertex(224, 278);
bezierVertex(232, 279, 237, 282, 241, 287);
vertex(273, 333);
vertex(362, 333);
vertex(415, 278);
vertex(478, 278);
vertex(499, 283);
vertex(499, 267);
bezierVertex(498, 261, 496, 255, 480, 252);
vertex(364, 242);
endShape(CLOSE);
line(118, 240, 118, 187);
noStroke();
fill(this.colors.body);
rect(237, 185, 4, 1.6);
rect(329, 185, 4, 1.6);
//door (outline only)
stroke(this.colors.outline);
noFill();
beginShape();
vertex(364, 242);
vertex(363, 290);
bezierVertex(362, 301, 354, 310, 347, 310);
vertex(277, 310);
bezierVertex(266, 309, 259, 303, 258, 290);
vertex(258, 183);
endShape();
//squares on top of roof
noStroke();
fill(this.colors.outline);
rect(157, 161, 25, 10);
rect(286, 161, 25, 10);
//roof rack
stroke(this.colors.outline);
noFill();
beginShape();
vertex(319, 134);
bezierVertex(335, 137, 335, 159, 319, 162);
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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