原生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: {.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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