createjs基本小车移动功能

已于 2023-03-13 15:13:59 修改
阅读量267 收藏
点赞数
分类专栏： vue 文章标签： javascript 前端
于 2023-03-13 14:56:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/darlene2929/article/details/129494243
版权

先放上html页面代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/easeljs.js"></script>
  <script src="js/tweenjs.js"></script>
  <script src="js/MovieClip.js"></script>
  <script src="js/vessel.js"></script>
  <script src="js/jquery-3.3.1.min.js"></script>
</head>

<body>

  <div class="" style="position:absolute;top:0;left:0px;">
    <canvas id="gameView" width="850px" height="150px"
      style="background-color: #cccccc;position:absolute;z-index:99999;"></canvas>
  </div>

  <!-- 动画方法 -->
  <script src="app.js"></script>

</body>
</html>

然后是create.js代码

//变量，后端传来的值
var bigCardistance = 0; //大车位置
var smallCardistance1 = 0; //小车1位置
var smallCardistance2 = 0; //小车2位置
var smallCardistance3 = 0; //小车3位置
// var smallCardistance4 = 0; //小车4位置
var smallCardistance5 = 0; //活套速度
var lineLength = 0; //矩形的位置

//变量，图片容器
var inBigCarFlag; //大车
var inSmallCar1Flag; //小车1
var inSmallCar2Flag; //小车2
var inSmallCar3Flag; //小车3
// var inSmallCar4Flag; //小车4
var background; //辊道
var jiantouFlag; //箭头1
var jiantouFlag2; //箭头2
var tankuangFlag; //弹框
var texttankuang; //弹框文字
var shape; //矩形遮挡物1
var shape2; //矩形遮挡物2
var shape3; //文字大车位置
var shape4; //文字小车位置1
var shape5; //文字小车位置2
var shape6; //文字小车位置3
// var shape7; //文字小车位置4
var shape8; //文字大车
var shape9; //文字小车1
var shape10; //文字小车2
// var shape11; //文字小车3
var shape12; //文字小车4

// 舞台
var stage;

// 变量
var postions1 = 800; //箭头1位置进行累加更新的
var postions2 = 0; //箭头2位置进行累加更新的
var dandu1 = 0; //箭头2在上一次运行的距离

//定时器调用后端传来的位置
self.setInterval("getPosition()", 1000);

//ajax调用后端
function getPosition() {
  $.ajax({
    url: 'http://127.0.0.1:8053/outLooper',
    type: 'get',
    dataType: 'JSON',
    processData: false,
    data: {},
    success: function (data) {
      //接收数据，更新全局变量

      if (bigCardistance != data.bigCar) {
        bigCardistance = data.bigCar;
        fChangeData1();
      }

      if (smallCardistance1 != data.smallCar1) {
        smallCardistance1 = data.smallCar1;
        fChangeData2();
      }

      if (smallCardistance2 != data.smallCar2) {
        smallCardistance2 = data.smallCar2;
        fChangeData3();
      }

      if (smallCardistance3 != data.smallCar3) {
        smallCardistance3 = data.smallCar3;
        fChangeData4();
      }

   
        smallCardistance5 = data.speed;
        fChangeData5();
  

      // smallCardistance4 = data.smallCar4;
      if (lineLength != data.lineLength) {
        lineLength = data.lineLength;
        fChangeData6();
      }


      //把图片放回最上面
      // stage.addChild(background);
      stage.addChild(inBigCarFlag);
    },
    error: function (XMLHttprequest, textStatus, errorThrown) {
      alert(textStatus);
    }
  });
}


//画图片
function drawImg() {
  //加载图片
  var inBigCar = 'img/大车2.png';
  var inSmallCar1 = 'img/小车1.png';
  var inSmallCar2 = 'img/小车1.png';
  var inSmallCar3 = 'img/小车1.png';
  // var inSmallCar4 = 'img/小车1.png';
  var roller = 'img/辊道.png';
  var jiantou = 'img/箭头.png';
  var jiantou2 = 'img/箭头.png';

  //放进容器
  inBigCarFlag = new createjs.Bitmap(inBigCar);
  inSmallCar1Flag = new createjs.Bitmap(inSmallCar1);
  inSmallCar2Flag = new createjs.Bitmap(inSmallCar2);
  inSmallCar3Flag = new createjs.Bitmap(inSmallCar3);
  // inSmallCar4Flag = new createjs.Bitmap(inSmallCar4);
  background = new createjs.Bitmap(roller);
  jiantouFlag = new createjs.Bitmap(jiantou);
  jiantouFlag2 = new createjs.Bitmap(jiantou2);

  // 设置位置
  inBigCarFlag.x = 0;
  inBigCarFlag.y = 50;

  inSmallCar1Flag.x = 0;
  inSmallCar1Flag.y = 50;

  inSmallCar2Flag.x = 0;
  inSmallCar2Flag.y = 50;

  inSmallCar3Flag.x = 0;
  inSmallCar3Flag.y = 50;

  // inSmallCar4Flag.x = 0;
  // inSmallCar4Flag.y = 50;

  background.x = 10;
  background.y = 122;
  background.scaleX = 0.66;

  jiantouFlag.x = 0;
  jiantouFlag.y = 23;
  jiantouFlag.scaleX = 0.08;
  jiantouFlag.scaleY = 0.08;

  jiantouFlag2.x = 840;
  jiantouFlag2.y = 80;
  jiantouFlag2.scaleX = 0.08;
  jiantouFlag2.scaleY = 0.08;

  //将容器放在舞台上
  stage.addChild(inBigCarFlag);
  stage.addChild(inSmallCar1Flag);
  stage.addChild(inSmallCar2Flag);
  stage.addChild(inSmallCar3Flag);
  // stage.addChild(inSmallCar4Flag);
  stage.addChild(background);
  stage.addChild(jiantouFlag);
  stage.addChild(jiantouFlag2);

  //点击箭头图片时，包个容器
  var hitArea = new createjs.Shape();
  hitArea.graphics.beginFill("#000").drawRect(0, 0, 3072, 4170);//这里是图片大小
  jiantouFlag.hitArea = hitArea;
  jiantouFlag.addEventListener('click', jiantouClick);
}


//画矩形框，遮挡物
function drawShape() {
  shape = new createjs.Shape();
  shape2 = new createjs.Shape();

  shape.graphics.beginFill("#cccccc").drawRoundRect(-800, 50, 800, 50, 13);//画一个圆角矩形,x位置;y位置;长度x;高度y;圆角的弧度
  shape2.graphics.beginFill("#cccccc").drawRoundRect(-780, 65, 800, 50, 13);//画一个圆角矩形,x位置;y位置;长度x;高度y;圆角的弧度

  //然后把这个图形添加到容器中
  stage.addChild(shape);
  stage.addChild(shape2);
}


// 画文字
function drawText() {
  shape3 = new createjs.Text(0, "15px Arial", "#fd0707");
  shape4 = new createjs.Text(0, "15px Arial", "#fd0707");
  shape5 = new createjs.Text(0, "15px Arial", "#fd0707");
  shape6 = new createjs.Text(0, "15px Arial", "#fd0707");
  // shape7 = new createjs.Text(0, "15px Arial", "#fd0707");
  shape8 = new createjs.Text("1#小车", "13px Arial", "#000000");
  shape9 = new createjs.Text("2#小车", "13px Arial", "#000000");
  shape10 = new createjs.Text("3#小车", "13px Arial", "#000000");
  // shape11 = new createjs.Text("4#小车", "13px Arial", "#000000");
  shape12 = new createjs.Text("出口活套", "13px Arial", "#000000");

  shape3.x = 0;
  shape3.y = 35;

  shape4.x = 0;
  shape4.y = 35;

  shape5.x = 0;
  shape5.y = 35;

  shape6.x = 0;
  shape6.y = 35;

  // shape7.x = 0;
  // shape7.y = 35;

  shape8.x = 0;
  shape8.y = 133;

  shape9.x = 0;
  shape9.y = 133;

  shape10.x = 0;
  shape10.y = 133;

  // shape11.x = 0;
  // shape11.y = 133;

  shape12.x = 0;
  shape12.y = 133;

  stage.addChild(shape3);
  stage.addChild(shape4);
  stage.addChild(shape5);
  stage.addChild(shape6);
  // stage.addChild(shape7);
  stage.addChild(shape8);
  stage.addChild(shape9);
  stage.addChild(shape10);
  // stage.addChild(shape11);
  stage.addChild(shape12);
}


//画线
function drawLine() {

  //获得舞台
  const vessel = new createjs.Shape();
  const vessel2 = new createjs.Shape();
  const vessel3 = new createjs.Shape();
  const vessel4 = new createjs.Shape();

  //属性
  vessel.graphics.beginStroke("blue");//线的颜色
  vessel.graphics.setStrokeStyle(1);//线的粗细
  vessel.graphics.moveTo(820, 55);//终点
  vessel.graphics.lineTo(40, 55);//起点

  vessel2.graphics.beginStroke("blue");//线的颜色
  vessel2.graphics.setStrokeStyle(1);//线的粗细
  vessel2.graphics.moveTo(820, 74);//终点
  vessel2.graphics.lineTo(40, 74);//起点

  vessel3.graphics.beginStroke("blue");//线的颜色
  vessel3.graphics.setStrokeStyle(1);//线的粗细
  vessel3.graphics.moveTo(820, 93);//终点
  vessel3.graphics.lineTo(40, 93);//起点

  vessel4.graphics.beginStroke("blue");//线的颜色
  vessel4.graphics.setStrokeStyle(1);//线的粗细
  vessel4.graphics.moveTo(820, 112);//终点
  vessel4.graphics.lineTo(40, 112);//起点

  //然后把这个图形添加到容器中
  stage.addChild(vessel);
  stage.addChild(vessel2);
  stage.addChild(vessel3);
  stage.addChild(vessel4);

}


// 页面加载调用的方法
window.onload = function () {
  stage = new createjs.Stage("gameView"); //获取舞台

  drawImg(); //画图片
  drawLine(); //画线
  drawShape(); //画矩形框
  drawText(); //画文字

  createjs.Ticker.addEventListener("tick", stageBreakHandler);
  //Ticker是一个计时类，不过他是每过一帧触发一次的，
  createjs.Ticker.setFPS(120);
}


// 舞台刷新方法
function stageBreakHandler() {
  stage.update();
}


//箭头的点击事件
function jiantouClick() {

  //只能点击一次
  if (tankuangFlag == undefined) {

    //加载图片
    var jiantou = 'img/tankuang.png';
    //放到容器内
    tankuangFlag = new createjs.Bitmap(jiantou);
    //设置初始位置，大小
    tankuangFlag.x = postions1;
    tankuangFlag.y = 0;
    tankuangFlag.scaleX = 0.05;
    tankuangFlag.scaleY = 0.03;
    //然后把这个图形添加到容器中
    stage.addChild(tankuangFlag);


    //设置文字内容，大小，颜色
    texttankuang = new createjs.Text("我的速度是: " + smallCardistance5, "13px Arial", "#000000");
    //设置初始位置
    texttankuang.x = postions1 * 1 + 30;
    texttankuang.y = 30;
    //添加到容器中
    stage.addChild(texttankuang);

    //2秒中消失
    setTimeout(function () {
      stage.removeChild(tankuangFlag);
      stage.removeChild(texttankuang);
      tankuangFlag = undefined;
      texttankuang = undefined;
    }, 2000);
  }

}


function fChangeData1() {
  shape3.text = (800 - bigCardistance) / 9 + "m";
  createjs.Tween.get(shape3).to({ x: bigCardistance * 1 + 20 }, 1000);
  createjs.Tween.get(inBigCarFlag).to({ x: bigCardistance }, 1000);
  createjs.Tween.get(shape12).to({ x: bigCardistance * 1 + 13 }, 1000);
}

function fChangeData2() {
  shape4.text = (800 - smallCardistance1) / 9 + "m";
  createjs.Tween.get(shape4).to({ x: smallCardistance1 * 1 + 5 }, 1000);
  createjs.Tween.get(inSmallCar1Flag).to({ x: smallCardistance1 }, 1000);
  createjs.Tween.get(shape8).to({ x: smallCardistance1 }, 1000);
}

function fChangeData3() {
  shape5.text = (800 - smallCardistance2) / 9 + "m";
  createjs.Tween.get(shape5).to({ x: smallCardistance2 * 1 + 5 }, 1000);
  createjs.Tween.get(inSmallCar2Flag).to({ x: smallCardistance2 }, 1000);
  createjs.Tween.get(shape9).to({ x: smallCardistance2 }, 1000);
}

function fChangeData4() {
  shape6.text = (800 - smallCardistance3) / 9 + "m";
  createjs.Tween.get(shape6).to({ x: smallCardistance3 * 1 + 5 }, 1000);
  createjs.Tween.get(inSmallCar3Flag).to({ x: smallCardistance3 }, 1000);
  createjs.Tween.get(shape10).to({ x: smallCardistance3 }, 1000);
}

function fChangeData5() {
  //更新箭头1的位置
  postions1 = smallCardistance5 * 10 + postions1;
  //如果大车位置小于箭头1的位置
  if (postions1 > 800) {
    //初始化箭头1的位置
    postions1 = bigCardistance;
    createjs.Tween.removeTweens(jiantouFlag);
    createjs.Tween.get(jiantouFlag).to({ x: bigCardistance }, 0);
    //如果箭头1被点击
    if (tankuangFlag != undefined) {
      //更新弹框位置
      createjs.Tween.get(tankuangFlag).to({ x: postions1 }, 0);
      //更新弹框里面的文字，位置
      texttankuang.text = "我的速度是: " + smallCardistance5;
      createjs.Tween.get(texttankuang).to({ x: postions1 * 1 + 30 }, 0);
    }
  } else if (postions1 < bigCardistance) {
    //更新箭头1的位置
    postions1 = 830;
    createjs.Tween.get(jiantouFlag).to({ x: postions1 }, 0);
    //如果箭头1被点击
    if (tankuangFlag != undefined) {
      //更新弹框位置
      createjs.Tween.get(tankuangFlag).to({ x: postions1 }, 0);
      //更新弹框里面的文字，位置
      texttankuang.text = "我的速度是: " + smallCardistance5;
      createjs.Tween.get(texttankuang).to({ x: postions1 * 1 + 30 }, 0);
    }
  } else {
    //更新箭头1的位置
    createjs.Tween.get(jiantouFlag).to({ x: postions1 }, 1000);
    //如果箭头1被点击
    if (tankuangFlag != undefined) {
      //更新弹框位置
      createjs.Tween.get(tankuangFlag).to({ x: postions1 }, 1000);
      //更新弹框里面的文字，位置
      texttankuang.text = "我的速度是: " + smallCardistance5;
      createjs.Tween.get(texttankuang).to({ x: postions1 * 1 + 30 }, 1000);
    }
  }

  //更新箭头2的位置
  postions2 = 830 - smallCardistance5 * 10 - (dandu1);
  dandu1 = smallCardistance5 * 10 + dandu1;

  //如果箭头2的位置小于0

  if (bigCardistance > postions2) {
    //初始化箭头2的位置
    dandu1 = 0;
    createjs.Tween.removeTweens(jiantouFlag2);
    createjs.Tween.get(jiantouFlag2).to({ x: 830 }, 0);
  } else if (postions2 > 800) {
    console.log("postions2    " + postions2);
    dandu1 = 800 - smallCardistance5 * 10 - bigCardistance;
    createjs.Tween.get(jiantouFlag2).to({ x: bigCardistance }, 0);
  } else {
    //更新箭头2的位置
    console.log("postions2    " + postions2);
    createjs.Tween.get(jiantouFlag2).to({ x: postions2 }, 1000);
  }
}

function fChangeData6() {
  //更新矩形位置
  createjs.Tween.get(shape).to({ x: lineLength }, 1000);
  createjs.Tween.get(shape2).to({ x: lineLength }, 1000);
}
(ღ星辰ღ)
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas2D沿路径动画实现
weixin_44022171的博客
05-19 1053
刚入职公司的时候，接手了一个canvas-2D的项目，客户要求能够实现根据实时数据的推送，canvas画布上的小车也能够根据消息在一个环路上去实时动画，尽管我们都知道这种需求是不可能实现的，如果想要实时数据推送，canvas上的图也跟着数据点位去变化，那么首先要采用WebSocket保持长连接，其次是不可能在中间动画起来的，假设小车在A，只有小车到了下一个点位B点，才能推送B点的数据给我，我是无法预知到下一个点位的，所以这种方案很明显不可取。
canvas画一个移动的小车，并且可以选择哪个部分被消除
09-14 739
如何用canvas画一个移动的物体呢，今天学了canvas后的联系解决了一下这个问题，代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl...
javascript 3种百度地图车辆平滑移动，轨迹回放，多车同时平滑移动
12-26
javascript 3种百度地图车辆平滑移动，轨迹回放，多车同时平滑移动
信息搜集：SHODAN API 参考
Liu_Bruce的博客
04-20 8023
信息搜集：SHODAN API 参考 Shodan是全球开放最早的网络空间搜索引擎，也是目前全球最为之名的搜索引擎。Shodan每月中会在全球5亿左右的设备上进行信息搜集，主要针对服务器、网络设备、摄像设备、工控设备等基础设备进行扫描。Shodan为用户提供了11种代码库便于使用API接口。使用Shodan需要注册账号，分为注册会员，企业版和高级企业版是收费的。Shodan搜素引擎界面如下图： Shodan主要获取互联网中设备中的服务、位置、端口、版本等信息，目前比较受欢迎的内容有webcam、link
HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
tansitongba
02-03 1963
HTML5正在变得越来越流行。在这个移动设备日益增长的时代，对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近，Adobe宣布Flash将不再支持移动设备。这意味着，Adobe自身也认为对移动设备来讲HTML5是一项重要的技术。而桌面系统的改变也是迟早的事。 HTML的一大劣势就是对于多媒体技术支持的缺乏。在HTML中，你无法直接显示一个视频或在屏幕上绘画。在HTML5中...
js实现移动的小车例子，点击按钮小车移动
big_beer的博客
04-09 2301
文章目录学习内容代码效果图片项目例子 学习内容 如何使用画布和纯js实现移动的小车？ 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用画布和js做的一个移动小车</title> </head> <body> <canvas id="canvas" height="400px" width="1500p.
canvas 轮询http接口让小车实时运动
周家大小姐
09-19 448
需求:项目中的canvas图要对应线下的实体仓库,但线上图是线下的迷你版所以并不能真正的按线下的XY走;只能线上按好线和图,把XY对应的所有点告诉后台,后台传给我startNode,endNode做为起点和结束然后根据这个点位绘制出一条路径线。setAnimation方法写在了mixin文件中;子组件引入并获取传入的值进行绘制小车要走的线路。
CreateJS：CreateJS初体验
02-06
CreateJS初体验项目一上线就迫不及待的想跟大家分享做这个项目，算是一个新的尝试，觉得很有意思，在处理类似这种动画效果的h5的时候可以用CreateJS来解决，这里在加载优化上也做了'极致'的优化。 CreateJS是基于...
Createjs压缩版
01-07
createjs压缩版,包括EaselJS、TweenJS、SoundJS、PreloadJS
html5 createjs 流星雨效果
09-01
html5 技术 canvas画布 createjs 漂亮的流星雨效果，后续上传雪花，旋转的星星灯效果，交流学习@@@@@@@@@@@
createjs实现仿echarts迁徙效果
05-19
createjs实现仿echarts迁徙效果
createjs游戏源码
07-03
createjs小游戏源码，整理的，适合新手学习！
Canvas 跟随鼠标移动的炫彩小球
weixin_65935315的博客
05-30 886
1. 初始化Canvas画布 1.1 设置画布参数 <canvas id="mycanvas" width="600" height="600"></canvas> 设置id选择器，并给画布的宽高赋值； 注意：宽高必须在行内里面设置，不能设置在css样式中，否则会被拉伸。 1.2 获取canvas元素 var canvas = document.querySelector('#mycanvas') var ctx = canvas.getContext
arcgis js for JavaScript 4.X 小车(图片)移动轨迹动画
到底要什么姿态，才不会显得我在使坏。
01-12 1531
【代码】arcgis js for JavaScript 4.X 小车(图片)移动轨迹动画。
简单实现小车轨迹动画
weixin_40598552的博客
09-29 894
requestAnimation更新n，移动marker到数组的第n项并设置其旋转角度。工具库计算路线每帧要走的点数组、相对正北的旋转角度数组。主要用到turf计算两点距离和向北的偏转角度。创建一个marker，用n记录次数。
Android绘制小车移动轨迹——蓝牙通信与SurfaceView实践（2）
Johnsonjjj的博客
01-13 1128
概述 上一篇博客主要介绍了这个项目的大致情况以及讲解了项目中蓝牙模块的简单使用，本篇博客主要会讲绘制轨迹部分的使用。 关于绘制轨迹，我使用的是SurfaceView这个控件，它与普通的View，既有相同点又有不不同点： view在UI线程去更新自己；而SurfaceView则在一个子线程中去更新自己。 surfaceView是在一个新起的单独线程中可以重新绘制画面，而View必须在UI的主线程中...
vue2+canvas 根据坐标实现小车移动
weixin_49651379的博客
11-12 4891
canvas小车移动
html5实现跑动的小车
f1913092的博客
01-15 377
通过动画演绎实现跑动的小车。
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 382
步骤很详细，直接上教程……
createjs 中文
04-28
EaselJS是CreateJS库中的绘图API，鼓励使用基于对象的编程模型来创建复杂的交互式图形，动画和其他高性能图形应用程序。它提供了2D图形，动画，粒子系统和轻量级事件处理。EaselJS还可以通过Canvas和WebGL来呈现符合...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值