原生js实现线条绘制的马儿跑起来动画效果代码
代码语言：html
所属分类：动画
代码描述：原生js实现线条绘制的马儿跑起来动画效果代码，背景是绿的山河围栏。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
box-sizing: border-box;
overflow: hidden;
}
body {
background: #8C6D51;
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 translate="no">
<canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/processing.1.4.8.js"></script>
<script >
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(600, 600);
frameRate(60);
smooth();
var Horse = (function() {
Horse = function() {
this.timer = 0;
this.frame = 0;
this.frameNext = 0;
this.frequency = 5;
this.wireframe = [
{
body: { //1 = head, 4 = other end :)
x1: 86,
y1: 249,
x2: 126,
y2: 223,
x3: 222,
y3: 273,
x4: 393,
y4: 278
},
leglf: { //left front leg
x1: 222,
y1: 273,
x2: 189,
y2: 321,
x3: 140,
y3: 335,
x4: 115,
y4: 390,
x5: 117,
y5: 402
},
legrf: { //right front leg
x1: 222,
y1: 273,
x2: 198,
y2: 319,
x3: 173,
y3: 364,
x4: 145,
y4: 412,
x5: 134,
y5: 429
},
leglb: { //left back leg
x1: 343,
y1: 278,
x2: 364,
y2: 326,
x3: 400,
y3: 370,
x4: 394,
y4: 425,
x5: 380,
y5: 440
},
legrb: { //right back leg
x1: 343,
y1: 278,
x2: 391,
y2: 310,
x3: 440,
y3: 334,
x4: 483,
y4: 384,
x5: 499,
y5: 387
}
}, //frame 1
{
body: { //1 = head, 4 = other end :)
x1: 85,
y1: 245,
x2: 126,
y2: 224,
x3: 224,
y3: 279,
x4: 400,
y4: 277
},
leglf: { //left front leg
x1: 224,
y1: 279,
x2: 188,
y2: 325,
x3: 149,
y3: 360,
x4: 111,
y4: 399,
x5: 97,
y5: 410
},
legrf: { //right front leg
x1: 224,
y1: 279,
x2: 214,
y2: 324,
x3: 207,
y3: 371,
x4: 205,
y4: 420,
x5: 190,
y5: 435
},
leglb: { //left back leg
x1: 350,
y1: 277,
x2: 387,
y2: 320,
x3: 428,
y3: 351,
x4: 446,
y4: 411,
x5: 449,
y5: 431
},
legrb: { //right back leg
x1: 350,
y1: 277,
x2: 394,
y2: 302,
x3: 448,
y3: 319,
x4: 488,
y4: 362,
x5: 505,
y5: 368
}
}, //frame 2
{
body: { //1 = head, 4 = other end :)
x1: 82,
y1: 242,
x2: 124,
y2: 220,
x3: 224,
y3: 279,
x4: 407,
y4: 266
},
leglf: { //left front leg
x1: 224,
y1: 279,
x2: 200,
y2: 320,
x3: 176,
y3: 366,
x4: 144,
y4: 412,
x5: 130,
y5: 424
},
legrf: { //right front leg
x1: 224,
y1: 279,
x2: 239,
y2: 321,
x3: 253,
y3: 364,
x4: 267,
y4: 415,
x5: 249,
y5: 430
},
leglb: { //left back leg
x1: 357,
y1: 266,
x2: 393,
y2: 307,
x3: 439,
y3: 325,
x4: 470,
y4: 381,
x5: 484,
y5: 396
},
legrb: { //right back leg
x1: 357,
y1: 266,
x2: 400,
y2: 292,
x3: 447,
y3: 299,
x4: 470,
y4: 349,
x5: 486,
y5: 359
}
}, //frame 3
{
body: { //1 = head, 4 = other end :)
x1: 80,
y1: 235,
x2: 121,
y2: 212,
x3: 224,
y3: 279,
x4: 406,
y4: 257
},
leglf: { //left front leg
x1: 224,
y1: 279,
x2: 207,
y2: 311,
x3: 203,
y3: 365,
x4: 202,
y4: 414,
x5: 190,
y5: 429
},
legrf: { //right front leg
x1: 224,
y1: 279,
x2: 248,
y2: 317,
x3: 279,
y3: 361,
x4: 310,
y4: 410,
x5: 322,
y5: 419
},
leglb: { //left back leg
x1: 356,
y1: 257,
x2: 381,
y2: 293,
x3: 441,
y3: 306,
x4: 472,
y4: 359,
x5: 487,
y5: 370
},
legrb: { //right back leg
x1: 356,
y1: 257,
x2: 385,
y2: 289,
x3: 429,
y3: 288,
x4: 447,
y4: 350,
x5: 455,
y5: 359
}
}, //frame 4
{
body: { //1 = head, 4 = other end :)
x1: 88,
y1: 232,
x2: 130,
y2: 210,
x3: 224,
y3: 279,
x4: 408,
y4: 253
},
leglf: { //left front leg
x1: 224,
y1: 279,
x2: 224,
y2: 316,
x3: 237,
y3: 366,
x4: 256,
y4: 416,
x5: 247,
y5: 429
},
legrf: { //right front leg
x1: 224,
y1: 279,
x2: 242,
y2: 321,
x3: 270,
y3: 363,
x4: 318,
y4: 389,
x5: 327,
y5: 388
},
leglb: { //left back leg
x1: 358,
y1: 253,
x2: 376,
y2: 290,
x3: 432,
y3: 291,
x4: 448,
y4: 350,
x5: 461,
y5: 359
},
legrb: { //right back leg
x1: 358,
y1: 253,
x2: 380,
y2: 280,
x3: 412,
y3: 284,
x4: 413,
y4: 350,
x5: 419,
y5: 357
}
}, //frame 5
{
body: { //1 = head, 4 = other end :)
x1: 90,
y1: 226,
x2: 131,
y2: 203,
x3: 224,
y3: 279,
x4: 404,
y4: 252
},
leglf: { //left front leg
x1: 224,
y1: 279,
x2: 238,
y2: 319,
x3: 265,
y3: 365,
x4: 296,
y4: 408,
x5: 294,
y5: 424
},
legrf: { //right front leg
x1: 224,
y1: 279,
x2: 223,
y2: 313,
x3: 242,
y3: 368,
x4: 296,
y4: 384,
x5: 305,
y5: 380
},
leglb: { //left back leg
x1: 354,
y1: 252,
x2: 360,
y2: 290,
x3: 416,
y3: 295,
x4: 422,
y4: 361,
x5: 431,
y5: 370
},
legrb: { //right back leg
x1: 354,
y1: 252,
x2: 350,
y2: 282,
x3: 390,
y3: 298,
x4: 375,
y4: 358,
x5: 377,
y5: 369
}
}, //frame 6
{
body: { //1 = head, 4 = other end :)
x1: 99,
y1: 221,
x2: 140,
y2: 196,
x3: 224,
y3: 279,
x4: 400,
y4: 249
},
leglf: { //left front leg
x1: 224,
y1: 279,
x2: 238,
y2: 313,
x3: 249,
y3: 361,
x4: 297,
y4: 396,
x5: 307,
y5: 397
},
legrf: { //right front leg
x1: 224,
y1: 279,
x2: 215,
y2: 310,
x3: 206,
y3: 354,
x4: 248,
y4: 386,
x5: 263,
y5: 384
},
leglb: { //left back leg
x1: 350,
y1: 249,
x2: 353,
y2: 287,
x3: 405,
y3: 300,
x4: 384,
y4: 353,
x5: 389,
y5: 370
},
legrb: { //right back leg
x1: 350,
y1: 249,
x2: 347,
y2: 283,
x3: 375,
y3: 300,
x4: 343,
y4: 353,
x5: 338,
y5: 370
}
}, //frame 7
{
body: { //1 = head, 4 = other end :)
x1: 106,
y1: 220,
x2: 148,
y2: 193,
x3: 224,
y3: 279,
x4: 402,
y4: 253
},
leglf: { //left front leg
x1: 224,
y1: 279,
x2: 238,
y2: 315,
x3: 233,
y3: 361,
x4: 277,
y4: 387,
x5: 289,
y5: 381
},
legrf: { //right front leg
x1: 224,
y1: 279,
x2: 204,
y2: 309,
x3: 168,
y3: 330,
x4: 187,
y4: 377,
x5: 197,
y5: 382
},
leglb: { //left back leg
x1: 352,
y1: 253,
x2: 356,
y2: 288,
x3: 390,
y3: 313,
x4: 346,
y4: 353,
x5: 345,
y5: 367
},
legrb: { //right back leg
x1: 352,
y1: 253,
x2: 339,
y2: 290,
x3: 356,
y3: 313,
x4: 309,
y4: 351,
x5: 298,
y5: 367
}
}, //frame 8
{
body: { //1 = head, 4 = other end :)
x1: 109,
y1: 231,
x2: 150,
y2: 206,
x3: 224,
y3: 279,
x4: 394,
y4: 270
},
leglf: { //left front leg
x1: 224,
y1: 279,
x2: 226,
y2: 317,
x3: 202,
y3: 362,
x4: 241,
y4: 387,
x5: 251,
y5: 382
},
legrf: { //right front leg
x1: 224,
y1: 279,
x2: 202,
y2: 314,
x3: 155,
y3: 320,
x4: 148,
y4: 373,
x5: 155,
y5: 382
},
leglb: { //left back leg
x1: 344,
y1: 270,
x2: 333,
y2: 294,
x3: 363,
y3: 339,
x4: 307,
y4: 364,
x5: 301,
y5: 377
},
legrb: { //right back leg
x1: 344,
y1: 270,
x2: 333,
y2: 316,
x3: 330,
y3: 359,
x4: 287,
y4: 400,
x5: 278,
y5: 414
}
}, //frame 9
{
body: { //1 = head, 4 = other end :)
x1: 104,
y1: 231,
x2: 145,
y2: 207,
x3: 224,
y3: 279,
x4: 394,
y4: 273
},
leglf: { //left front leg
x1: 224,
y1: 279,
x2: 212,
y2: 314,
x3: 173,
y3: 342,
x4: 204,
y4: 382,
x5: 216,
y5: 384
},
legrf: { //right front leg
x1: 224,
y1: 279,
x2: 188,
y2: 313,
x3: 147,
y3: 309,
x4: 130,
y4: 357,
x5: 134,
y5: 368
},
leglb: { //left back leg
x1: 344,
y1: 273,
x2: 331,
y2: 307,
x3: 338,
y3: 349,
x4: 289,
y4: 375,
x5: 280,
y5: 391
},
legrb: { //right back leg
x1: 344,
y1: 273,
x2: 348,
y2: 319,
x3: 370,
y3: 366,
x4: 346,
y4: 418,
x5: 332,
y5: 430
}
}, //frame 10
{
body: { //1 = head, 4 = other end :)
x1: 103,
y1: 231,
x2: 142,
y2: 206,
x3: 224,
y3: 273,
x4: 393,
y4: 275
},
leglf: { //left front leg
x1: 224,
y1: 273,
x2: 203,
y2: 314,
x3: 160,
y3: 326,
x4: 171,
y4: 383,
x5: 180,
y5: 390
},
legrf: { //right front leg
x1: 224,
y1: 273,
x2: 189,
y2: 309,
x3: 144,
y3: 316,
x4: 115,
y4: 357,
x5: 114,
y5: 371
},
leglb: { //left back leg
x1: 343,
y1: 275,
x2: 329,
y2: 311,
x3: 323,
y3: 364,
x4: 290,
y4: 415,
x5: 273,
y5: 427
},
legrb: { //right back leg
x1: 343,
y1: 275,
x2: 366,
y2: 316,
x3: 410,
y3: 351,
x4: 407,
y4: 415,
x5: 393,
y5: 427
}
}, //frame 11
{
body: { //1 = head, 4 = other end :)
x1: 99,
y1: 246,
x2: 137,
y2: 221,
x3: 224,
y3: 276,
x4: 395,
y4: 288
},
leglf: { //left front leg
x1: 224,
y1: 276,
x2: 198,
y2: 324,
x3: 150,
y3: 332,
x4: 141,
y4: 383,
x5: 144,
y5: 395
},
legrf: { //right front leg
x1: 224,
y1: 276,
x2: 196,
y2: 322,
x3: 158,
y3: 356,
x4: 119,
y4: 396,
x5: 105,
y5: 405
},
leglb: { //left back leg
x1: 345,
y1: 288,
x2: 343,
y2: 331,
x3: 364,
y3: 373,
x4: 340,
y4: 424,
x5: 326,
y5: 438
},
legrb: { //right back leg
x1: 345,
y1: 288,
x2: 379,
y2: 325,
x3: 429,
y3: 355,
x4: 455,
y4: 410,
x5: 462,
y5: 421
}
} //frame 12
];
this.skeleton = [
{
head: [],
neck: [],
body: []
}, //frame 1
{
head: [],
neck: [],
body: []
}, //frame 2
{
head: [],
neck: [],
body: []
}, //frame 3
{
head: [],
neck: [],
body: []
}, //frame 4
{
head: [],
neck: [],
body: []
}, //frame 5
{
head: [],
neck: [],
body: []
}, //frame 6
{
head: [],
neck: [],
body: []
}, //frame 7
{
head: [],
neck: [],
body: []
}, //frame 8
{
head: [],
neck: [],
body: []
}, //frame 9
{
head: [],
neck: [],
body: []
}, //frame 10
{
head: [],
neck: [],
body: []
}, //frame 11
{
head: [],
neck: [],
body: []
} //frame 12
];
this.nodes = {
head: [],
neck: [],
body: [],
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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