原生js实现线条绘制的马儿跑起来动画效果代码-html代码-BFW代码库

原生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,
               .........完整代码请登录后点击上方下载按钮下载查看