如何在不同位置的几秒内通过 onClick 事件重绘 canvas？
How to redraw canvas by onClick event within few seconds in different position?
我想在几秒钟内在不同位置重绘 canvas 多次，从底部开始直到用户选择 button/link。
根据示例图片，
如果用户点击 5 楼的项目，那么电梯应该从一楼缓慢移动到 5 楼。感谢任何一种方法。
从附带的代码来看，如果单击任何楼层项目，电梯将直接移动到该级别，因为我放置了固定大小。我需要的是将电梯缓慢移动到选定的楼层。希望能让大家看懂场景。
function load() {
var context = document.getElementById('main').getContext("2d");
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
var floorTen = document.getElementById('floorTen');
var floorNine = document.getElementById('floorNine');
var floorEight = document.getElementById('floorEight');
var floorSeven = document.getElementById('floorSeven');
var floorSix = document.getElementById('floorSix');
var floorFive = document.getElementById('floorFive');
var floorFour = document.getElementById('floorFour');
var floorThree = document.getElementById('floorThree');
var floorTwo = document.getElementById('floorTwo');
var floorOne = document.getElementById('floorOne');
var floorG = document.getElementById('floorG');
//default position
var posX = 48;
var posY = 905;
//floor distance
var snapG = 10;
var snap1 = 90;
var snap2 = 185;
var snap3 = 270;
var snap4 = 360;
var snap5 = 450;
var snap6 = 540;
var snap7 = 620;
var snap8 = 710;
var snap9 = 800;
var snap10 = 890;
var imgLoaded = false;
var img = new Image();
//img.src = "http://via.placeholder.com/50x50";
img.src = "Elevatorai.png";
img.onload = function() {
imgLoaded = true;
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
// Floor button click
floorTen.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap10;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorNine.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap9;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorEight.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap8;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorSeven.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap7;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorSix.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap6;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorFive.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap5;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorFour.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap4;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorThree.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap3;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorTwo.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap2;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorOne.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap1;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorG.onclick = function() {
if (!imgLoaded) return;
//posY = posY + snapG;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
}
.shadow1{
box-shadow: 3px 7px 3px gray;
transition: all .2s ease-in-out;
}
.shadow1:hover{
transform: scale(1.05);
}
#main {
background-color: gray;
}
/* Media query for Mobile devices*/
@media only screen and (min-width: 285px) and (max-width: 480px) {
}
/* Media Query for Tablets */
@media only screen and (min-width: 481px) and (max-width: 1024px) {
}
/* Desktops and laptops */
@media only screen and (min-width: 1025px) {
}
<div class="row">
<div class="col-sm-2 bg-primary">
<h5>Advertisement</h5>
</div>
<div class="col-sm-10 bg-light">
<h5 class="text-center mt-4">Floor Selection</h5>
<div class="row pb-5 no-gutters" style="padding-left: 100px; padding-right: 100px;">
<div class="col-sm-2 mt-2 text-center">
<canvas id="main" width="200px" height="1000px"></canvas>
</div>
<div class="col-sm-8">
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorTen" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Home & Office Furniture</strong></h6></button>
<a href="" id="" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"> <span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Home Appliances & Accessories</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorNine" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Ready Food & Beverages</strong></h6></button>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorEight" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Toys & Gadgets Offices Stationaries & Accessories</strong></h6></button>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorSeven" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Halal Products & Goods</strong></h6></button>
<a href="" id="floorSeven" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Retails Stores</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorSix" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Electronics</strong></h6></button>
<a href="" id="floorSix" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile & Tablets</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile Accessories</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Camera</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> IT Accessories Computers, Printer & Laptop</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorFive" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Sport Clothes Male & Accessories</strong></h6></button>
<a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Swim Suit Male & Female</span></a>
<a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Gym & Other Sports Equipments</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorFour" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Jewelry & Accessories</strong></h6></button>
<a href="" id="floorFour" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Jewelry</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Trinkets Jewelry</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Sun Glasses</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Watches</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorThree" class="text-dark btn btn-default" style="text-decoration: none;"> <h6><strong>Beauty</strong></h6></button>
<a href="" id="floorThree" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Cosmetics</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Skin Care</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Hair Care</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Perfumes (Male & Female)</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorTwo" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Man Fashion</strong></h6></button>
<a href="" id="floorTwo" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
<a href="" id="floorTow" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
<a href="" id="floorTwo" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Leather Items</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorOne" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Women Fashion</strong></h6></button>
<a href="" id="floorOne" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
<a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Lingeries</a>
<a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorG" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Backyard</strong></h6></button>
</div>
</div>
<div class="col-sm-2">People will be moving here</div>
</div>
</div>
</div>
首先，我们真的应该尝试稍微清理一下您的代码，因为有很多重复，这使得维护有点困难。
您有 11 个按钮，点击后基本上都会执行相同的操作：
- 更新单个变量
- 重绘canvas
目前您手动将上述所有操作附加到每个按钮。
例如
var floorG = document.getElementById('floorG');
floorG.onclick = function() {
if (!imgLoaded) return;
//posY = posY + snapG;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
所以上面重复了十一次！
最好将功能一次包装在一个函数中，然后将相同的函数附加到每个按钮：
为此，让我们创建一个对象数组，其中每个对象都包含按钮的 ID 以及电梯的目标位置。
var myButtons = [
{id: "floorG",snap: 10},
{id: "floorOne",snap: 90},
{id: "floorTwo", snap: 185},
{id: "floorThree", snap: 270},
{id: "floorFour", snap: 360},
{id: "floorFive", snap: 450},
{id: "floorSix",snap: 540},
{id: "floorSeven",snap: 620},
{id: "floorEight", snap: 710},
{id: "floorNine", snap: 800},
{id: "floorTen", snap: 890}
];
现在我们可以简单地遍历这个数组，获取一个 id 加上目标位置并为适当的按钮创建一个点击事件侦听器：
function buttonClick(e) {
if (!imgLoaded) return;
targY = e.currentTarget.snap;
}
var theButton;
for (var a = 0; a < myButtons.length; a++) {
theButton = document.getElementById(myButtons[a].id);
theButton.snap = myButtons[a].snap;
theButton.onclick = buttonClick;
}
电梯的实际运动其实并不难。我们只需要一个根据电梯的目标位置不断更新 canvas 的函数。此外，如果电梯不只是以线性方式从 a 移动到 b，那就太好了——它应该在接近目的地时减速。这种效果称为 easing。
让我们创建另一个函数 updateCanvas()
function updateCanvas() {
posY = ((posY - targY) * 0.9 + targY);
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80, 0);
context.lineTo(80, 1000);
context.moveTo(50, 0);
context.lineTo(50, 1000);
context.moveTo(110, 0);
context.lineTo(110, 1000);
context.font = "20px Arial";
context.fillText("G", 130, 940);
context.fillText("1st", 130, 850);
context.fillText("2nd", 130, 760);
context.fillText("3rd", 130, 670);
context.fillText("4th", 130, 580);
context.fillText("5th", 130, 495);
context.fillText("6th", 130, 405);
context.fillText("7th", 130, 315);
context.fillText("8th", 130, 225);
context.fillText("9th", 130, 135);
context.fillText("10th", 125, 50);
context.stroke();
context.drawImage(img, posX, posY + img.height / 2, img.width, img.height);
}
在上面的代码中，我们根据电梯的当前位置和目的地 - targY 重新计算电梯的位置。
posY = ((posY - targY) * 0.9 + targY)
系数 0.9 控制移动速度 - 越接近 1.[=24= 速度越快]
现在缺少的只是定期调用此函数的某种机制。这是通过使用 setInterval() 方法完成的。它以固定的时间间隔调用给定的函数。
这是完整的示例（只需单击 'Run code snippet'）：
var context = document.getElementById('main').getContext("2d");
var myButtons = [
{id: "floorG",snap: 10},
{id: "floorOne",snap: 90},
{id: "floorTwo", snap: 185},
{id: "floorThree", snap: 270},
{id: "floorFour", snap: 360},
{id: "floorFive", snap: 450},
{id: "floorSix",snap: 540},
{id: "floorSeven",snap: 620},
{id: "floorEight", snap: 710},
{id: "floorNine", snap: 800},
{id: "floorTen", snap: 890}
];
var posX = 48;
var posY = 905;
var targY = posY;
var imgLoaded = false;
var img = new Image();
img.onload = function() {
imgLoaded = true;
context.drawImage(img, posX, posY, img.width / 21, img.height / 29);
};
img.src = "http://via.placeholder.com/50x50";
function updateCanvas() {
posY = ((posY - targY) * 0.9 + targY);
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();
context.moveTo(80, 0);
context.lineTo(80, 1000);
context.moveTo(50, 0);
context.lineTo(50, 1000);
context.moveTo(110, 0);
context.lineTo(110, 1000);
context.font = "20px Arial";
context.fillText("G", 130, 940);
context.fillText("1st", 130, 850);
context.fillText("2nd", 130, 760);
context.fillText("3rd", 130, 670);
context.fillText("4th", 130, 580);
context.fillText("5th", 130, 495);
context.fillText("6th", 130, 405);
context.fillText("7th", 130, 315);
context.fillText("8th", 130, 225);
context.fillText("9th", 130, 135);
context.fillText("10th", 125, 50);
context.stroke();
context.drawImage(img, posX, posY + img.height / 2, img.width, img.height);
}
function buttonClick(e) {
if (!imgLoaded) return;
targY = e.currentTarget.snap;
}
var theButton;
for (var a = 0; a < myButtons.length; a++) {
theButton = document.getElementById(myButtons[a].id);
theButton.snap = myButtons[a].snap;
theButton.onclick = buttonClick;
}
var interval = setInterval(updateCanvas, 20);
.shadow1 {
box-shadow: 3px 7px 3px gray;
transition: all .2s ease-in-out;
}
.shadow1:hover {
transform: scale(1.05);
}
#main {
background-color: gray;
}
/* Media query for Mobile devices*/
@media only screen and (min-width: 285px) and (max-width: 480px) {}
/* Media Query for Tablets */
@media only screen and (min-width: 481px) and (max-width: 1024px) {}
/* Desktops and laptops */
@media only screen and (min-width: 1025px) {}
<div class="row">
<div class="col-sm-2 bg-primary">
<h5>Advertisement</h5>
</div>
<div class="col-sm-10 bg-light">
<h5 class="text-center mt-4">Floor Selection</h5>
<div class="row pb-5 no-gutters" style="padding-left: 100px; padding-right: 100px;">
<div class="col-sm-2 mt-2 text-center">
<canvas id="main" width="200px" height="1000px"></canvas>
</div>
<div class="col-sm-8">
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorTen" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Home & Office Furniture</strong></h6></button>
<a href="" id="" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"> <span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Home Appliances & Accessories</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorNine" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Ready Food & Beverages</strong></h6></button>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorEight" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Toys & Gadgets Offices Stationaries & Accessories</strong></h6></button>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorSeven" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Halal Products & Goods</strong></h6></button>
<a href="" id="floorSeven" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Retails Stores</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorSix" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Electronics</strong></h6></button>
<a href="" id="floorSix" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile & Tablets</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile Accessories</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Camera</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> IT Accessories Computers, Printer & Laptop</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorFive" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Sport Clothes Male & Accessories</strong></h6></button>
<a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Swim Suit Male & Female</span></a>
<a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Gym & Other Sports Equipments</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorFour" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Jewelry & Accessories</strong></h6></button>
<a href="" id="floorFour" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Jewelry</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Trinkets Jewelry</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Sun Glasses</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Watches</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorThree" class="text-dark btn btn-default" style="text-decoration: none;"> <h6><strong>Beauty</strong></h6></button>
<a href="" id="floorThree" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Cosmetics</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Skin Care</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Hair Care</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Perfumes (Male & Female)</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorTwo" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Man Fashion</strong></h6></button>
<a href="" id="floorTwo" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
<a href="" id="floorTow" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
<a href="" id="floorTwo" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Leather Items</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorOne" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Women Fashion</strong></h6></button>
<a href="" id="floorOne" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
<a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Lingeries</a>
<a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorG" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Backyard</strong></h6></button>
</div>
</div>
<div class="col-sm-2">People will be moving here</div>
</div>
</div>
</div>
编辑
正如您在评论中所问 - 是的，可以在 'elevator' 移动期间更改颜色。我修改了之前的示例以更改文本颜色。
为了完成这项工作，我们需要检查电梯的当前垂直屏幕位置并将其与每个文本框的位置进行比较。这意味着我们需要对文本及其在另一个数组中的位置进行分组，因为这使得更新循环中的事情变得更容易一些。
var floors=[{name: "G",xPos: 130, yPos: 940},
{name: "1st",xPos: 130, yPos: 850},
{name: "2nd",xPos: 130, yPos: 760 },
{name: "3rd",xPos: 130, yPos: 670},
{name: "4th",xPos: 130, yPos: 580},
{name: "5th",xPos: 130, yPos: 495},
{name: "6th",xPos: 130, yPos: 405},
{name: "7th",xPos: 130, yPos: 315},
{name: "8th",xPos: 130, yPos: 225},
{name: "9th",xPos: 130, yPos: 135},
{name: "10th",xPos: 125, yPos: 50}
];
现在我们可以很容易地遍历这个数组，检查电梯是否在一定范围内到上面的 yPos 位置之一，如果是的话，使用不同的文本颜色。
此外，如果电梯到达目标 targY，我们现在将清除间隔并将文本颜色设置为另一种颜色，因为如果电梯静止不动，实际上没有必要继续重绘 canvas。
完整代码如下：
var context = document.getElementById('main').getContext("2d");
var myButtons = [
{id: "floorG",snap: 10},
{id: "floorOne",snap: 90},
{id: "floorTwo", snap: 185},
{id: "floorThree", snap: 270},
{id: "floorFour", snap: 360},
{id: "floorFive", snap: 450},
{id: "floorSix",snap: 540},
{id: "floorSeven",snap: 620},
{id: "floorEight", snap: 710},
{id: "floorNine", snap: 800},
{id: "floorTen", snap: 890}
];
var floors=[{name: "G",xPos: 130, yPos: 940},
{name: "1st",xPos: 130, yPos: 850},
{name: "2nd",xPos: 130, yPos: 760 },
{name: "3rd",xPos: 130, yPos: 670},
{name: "4th",xPos: 130, yPos: 580},
{name: "5th",xPos: 130, yPos: 495},
{name: "6th",xPos: 130, yPos: 405},
{name: "7th",xPos: 130, yPos: 315},
{name: "8th",xPos: 130, yPos: 225},
{name: "9th",xPos: 130, yPos: 135},
{name: "10th",xPos: 125, yPos: 50}
];
var posX = 48;
var posY = 905;
var targY = posY;
var interval;
var imgLoaded = false;
var img = new Image();
img.onload = function() {
imgLoaded = true;
context.drawImage(img, posX, posY, img.width / 21, img.height / 29);
};
img.src = "http://via.placeholder.com/50x50";
function updateCanvas() {
posY = ((posY - targY) * 0.9 + targY);
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.fillStyle = "black";
context.beginPath();
context.moveTo(80, 0);
context.lineTo(80, 1000);
context.moveTo(50, 0);
context.lineTo(50, 1000);
context.moveTo(110, 0);
context.lineTo(110, 1000);
context.font = "20px Arial";
var floor;
for (var a = 0; a < floors.length; a++) {
floor = floors[a];
if (Math.abs((posY + img.height / 2) - floor.yPos) < 30) {
if (Math.abs(posY - targY) < 1) {
context.fillStyle = "green";
clearInterval(interval);
interval = null;
} else {
context.fillStyle = "blue";
}
} else {
context.fillStyle = "black";
}
context.fillText(floor.name, floor.xPos, floor.yPos);
}
context.stroke();
context.drawImage(img, posX, posY + img.height / 2, img.width, img.height);
}
function buttonClick(e) {
if (!imgLoaded) return;
targY = e.currentTarget.snap;
if(interval==null)
{
interval = setInterval(updateCanvas, 20);
}
}
var theButton;
for (var a = 0; a < myButtons.length; a++) {
theButton = document.getElementById(myButtons[a].id);
theButton.snap = myButtons[a].snap;
theButton.onclick = buttonClick;
}
interval = setInterval(updateCanvas, 20);
.shadow1 {
box-shadow: 3px 7px 3px gray;
transition: all .2s ease-in-out;
}
.shadow1:hover {
transform: scale(1.05);
}
#main {
background-color: gray;
}
/* Media query for Mobile devices*/
@media only screen and (min-width: 285px) and (max-width: 480px) {}
/* Media Query for Tablets */
@media only screen and (min-width: 481px) and (max-width: 1024px) {}
/* Desktops and laptops */
@media only screen and (min-width: 1025px) {}
<div class="row">
<div class="col-sm-2 bg-primary">
<h5>Advertisement</h5>
</div>
<div class="col-sm-10 bg-light">
<h5 class="text-center mt-4">Floor Selection</h5>
<div class="row pb-5 no-gutters" style="padding-left: 100px; padding-right: 100px;">
<div class="col-sm-2 mt-2 text-center">
<canvas id="main" width="200px" height="1000px"></canvas>
</div>
<div class="col-sm-8">
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorTen" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Home & Office Furniture</strong></h6></button>
<a href="" id="" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"> <span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Home Appliances & Accessories</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorNine" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Ready Food & Beverages</strong></h6></button>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorEight" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Toys & Gadgets Offices Stationaries & Accessories</strong></h6></button>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorSeven" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Halal Products & Goods</strong></h6></button>
<a href="" id="floorSeven" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Retails Stores</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorSix" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Electronics</strong></h6></button>
<a href="" id="floorSix" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile & Tablets</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile Accessories</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Camera</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> IT Accessories Computers, Printer & Laptop</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorFive" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Sport Clothes Male & Accessories</strong></h6></button>
<a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Swim Suit Male & Female</span></a>
<a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Gym & Other Sports Equipments</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorFour" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Jewelry & Accessories</strong></h6></button>
<a href="" id="floorFour" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Jewelry</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Trinkets Jewelry</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Sun Glasses</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Watches</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorThree" class="text-dark btn btn-default" style="text-decoration: none;"> <h6><strong>Beauty</strong></h6></button>
<a href="" id="floorThree" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Cosmetics</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Skin Care</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Hair Care</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Perfumes (Male & Female)</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorTwo" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Man Fashion</strong></h6></button>
<a href="" id="floorTwo" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
<a href="" id="floorTow" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
<a href="" id="floorTwo" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Leather Items</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorOne" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Women Fashion</strong></h6></button>
<a href="" id="floorOne" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
<a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Lingeries</a>
<a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorG" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Backyard</strong></h6></button>
</div>
</div>
<div class="col-sm-2">People will be moving here</div>
</div>
</div>
</div>
我想在几秒钟内在不同位置重绘 canvas 多次，从底部开始直到用户选择 button/link。
根据示例图片， 如果用户点击 5 楼的项目，那么电梯应该从一楼缓慢移动到 5 楼。感谢任何一种方法。 从附带的代码来看，如果单击任何楼层项目，电梯将直接移动到该级别，因为我放置了固定大小。我需要的是将电梯缓慢移动到选定的楼层。希望能让大家看懂场景。
function load() {
var context = document.getElementById('main').getContext("2d");
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
var floorTen = document.getElementById('floorTen');
var floorNine = document.getElementById('floorNine');
var floorEight = document.getElementById('floorEight');
var floorSeven = document.getElementById('floorSeven');
var floorSix = document.getElementById('floorSix');
var floorFive = document.getElementById('floorFive');
var floorFour = document.getElementById('floorFour');
var floorThree = document.getElementById('floorThree');
var floorTwo = document.getElementById('floorTwo');
var floorOne = document.getElementById('floorOne');
var floorG = document.getElementById('floorG');
//default position
var posX = 48;
var posY = 905;
//floor distance
var snapG = 10;
var snap1 = 90;
var snap2 = 185;
var snap3 = 270;
var snap4 = 360;
var snap5 = 450;
var snap6 = 540;
var snap7 = 620;
var snap8 = 710;
var snap9 = 800;
var snap10 = 890;
var imgLoaded = false;
var img = new Image();
//img.src = "http://via.placeholder.com/50x50";
img.src = "Elevatorai.png";
img.onload = function() {
imgLoaded = true;
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
// Floor button click
floorTen.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap10;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorNine.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap9;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorEight.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap8;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorSeven.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap7;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorSix.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap6;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorFive.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap5;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorFour.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap4;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorThree.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap3;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorTwo.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap2;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorOne.onclick = function() {
if (!imgLoaded) return;
posY = posY - snap1;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
floorG.onclick = function() {
if (!imgLoaded) return;
//posY = posY + snapG;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
}
.shadow1{
box-shadow: 3px 7px 3px gray;
transition: all .2s ease-in-out;
}
.shadow1:hover{
transform: scale(1.05);
}
#main {
background-color: gray;
}
/* Media query for Mobile devices*/
@media only screen and (min-width: 285px) and (max-width: 480px) {
}
/* Media Query for Tablets */
@media only screen and (min-width: 481px) and (max-width: 1024px) {
}
/* Desktops and laptops */
@media only screen and (min-width: 1025px) {
}
<div class="row">
<div class="col-sm-2 bg-primary">
<h5>Advertisement</h5>
</div>
<div class="col-sm-10 bg-light">
<h5 class="text-center mt-4">Floor Selection</h5>
<div class="row pb-5 no-gutters" style="padding-left: 100px; padding-right: 100px;">
<div class="col-sm-2 mt-2 text-center">
<canvas id="main" width="200px" height="1000px"></canvas>
</div>
<div class="col-sm-8">
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorTen" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Home & Office Furniture</strong></h6></button>
<a href="" id="" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"> <span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Home Appliances & Accessories</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorNine" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Ready Food & Beverages</strong></h6></button>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorEight" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Toys & Gadgets Offices Stationaries & Accessories</strong></h6></button>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorSeven" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Halal Products & Goods</strong></h6></button>
<a href="" id="floorSeven" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Retails Stores</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorSix" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Electronics</strong></h6></button>
<a href="" id="floorSix" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile & Tablets</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile Accessories</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Camera</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> IT Accessories Computers, Printer & Laptop</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorFive" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Sport Clothes Male & Accessories</strong></h6></button>
<a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Swim Suit Male & Female</span></a>
<a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Gym & Other Sports Equipments</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorFour" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Jewelry & Accessories</strong></h6></button>
<a href="" id="floorFour" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Jewelry</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Trinkets Jewelry</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Sun Glasses</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Watches</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorThree" class="text-dark btn btn-default" style="text-decoration: none;"> <h6><strong>Beauty</strong></h6></button>
<a href="" id="floorThree" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Cosmetics</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Skin Care</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Hair Care</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Perfumes (Male & Female)</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorTwo" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Man Fashion</strong></h6></button>
<a href="" id="floorTwo" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
<a href="" id="floorTow" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
<a href="" id="floorTwo" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Leather Items</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorOne" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Women Fashion</strong></h6></button>
<a href="" id="floorOne" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
<a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Lingeries</a>
<a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorG" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Backyard</strong></h6></button>
</div>
</div>
<div class="col-sm-2">People will be moving here</div>
</div>
</div>
</div>
首先，我们真的应该尝试稍微清理一下您的代码，因为有很多重复，这使得维护有点困难。
您有 11 个按钮，点击后基本上都会执行相同的操作：
- 更新单个变量
- 重绘canvas
目前您手动将上述所有操作附加到每个按钮。
例如
var floorG = document.getElementById('floorG');
floorG.onclick = function() {
if (!imgLoaded) return;
//posY = posY + snapG;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80,0);
context.lineTo(80,1000);
context.moveTo(50,0);
context.lineTo(50,1000);
context.moveTo(110,0);
context.lineTo(110,1000);
context.font = "20px Arial";
context.fillText("G",130,940);
context.fillText("1st",130,850);
context.fillText("2nd",130,760);
context.fillText("3rd",130,670);
context.fillText("4th",130,580);
context.fillText("5th",130,495);
context.fillText("6th",130,405);
context.fillText("7th",130,315);
context.fillText("8th",130,225);
context.fillText("9th",130,135);
context.fillText("10th",125,50);
context.stroke();
context.drawImage(img, posX, posY, img.width/21, img.height/29);
};
所以上面重复了十一次！
最好将功能一次包装在一个函数中，然后将相同的函数附加到每个按钮： 为此，让我们创建一个对象数组，其中每个对象都包含按钮的 ID 以及电梯的目标位置。
var myButtons = [
{id: "floorG",snap: 10},
{id: "floorOne",snap: 90},
{id: "floorTwo", snap: 185},
{id: "floorThree", snap: 270},
{id: "floorFour", snap: 360},
{id: "floorFive", snap: 450},
{id: "floorSix",snap: 540},
{id: "floorSeven",snap: 620},
{id: "floorEight", snap: 710},
{id: "floorNine", snap: 800},
{id: "floorTen", snap: 890}
];
现在我们可以简单地遍历这个数组，获取一个 id 加上目标位置并为适当的按钮创建一个点击事件侦听器：
function buttonClick(e) {
if (!imgLoaded) return;
targY = e.currentTarget.snap;
}
var theButton;
for (var a = 0; a < myButtons.length; a++) {
theButton = document.getElementById(myButtons[a].id);
theButton.snap = myButtons[a].snap;
theButton.onclick = buttonClick;
}
电梯的实际运动其实并不难。我们只需要一个根据电梯的目标位置不断更新 canvas 的函数。此外，如果电梯不只是以线性方式从 a 移动到 b，那就太好了——它应该在接近目的地时减速。这种效果称为 easing。
让我们创建另一个函数 updateCanvas()
function updateCanvas() {
posY = ((posY - targY) * 0.9 + targY);
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.moveTo(80, 0);
context.lineTo(80, 1000);
context.moveTo(50, 0);
context.lineTo(50, 1000);
context.moveTo(110, 0);
context.lineTo(110, 1000);
context.font = "20px Arial";
context.fillText("G", 130, 940);
context.fillText("1st", 130, 850);
context.fillText("2nd", 130, 760);
context.fillText("3rd", 130, 670);
context.fillText("4th", 130, 580);
context.fillText("5th", 130, 495);
context.fillText("6th", 130, 405);
context.fillText("7th", 130, 315);
context.fillText("8th", 130, 225);
context.fillText("9th", 130, 135);
context.fillText("10th", 125, 50);
context.stroke();
context.drawImage(img, posX, posY + img.height / 2, img.width, img.height);
}
在上面的代码中，我们根据电梯的当前位置和目的地 - targY 重新计算电梯的位置。
posY = ((posY - targY) * 0.9 + targY)
系数 0.9 控制移动速度 - 越接近 1.[=24= 速度越快]
现在缺少的只是定期调用此函数的某种机制。这是通过使用 setInterval() 方法完成的。它以固定的时间间隔调用给定的函数。
这是完整的示例（只需单击 'Run code snippet'）：
var context = document.getElementById('main').getContext("2d");
var myButtons = [
{id: "floorG",snap: 10},
{id: "floorOne",snap: 90},
{id: "floorTwo", snap: 185},
{id: "floorThree", snap: 270},
{id: "floorFour", snap: 360},
{id: "floorFive", snap: 450},
{id: "floorSix",snap: 540},
{id: "floorSeven",snap: 620},
{id: "floorEight", snap: 710},
{id: "floorNine", snap: 800},
{id: "floorTen", snap: 890}
];
var posX = 48;
var posY = 905;
var targY = posY;
var imgLoaded = false;
var img = new Image();
img.onload = function() {
imgLoaded = true;
context.drawImage(img, posX, posY, img.width / 21, img.height / 29);
};
img.src = "http://via.placeholder.com/50x50";
function updateCanvas() {
posY = ((posY - targY) * 0.9 + targY);
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();
context.moveTo(80, 0);
context.lineTo(80, 1000);
context.moveTo(50, 0);
context.lineTo(50, 1000);
context.moveTo(110, 0);
context.lineTo(110, 1000);
context.font = "20px Arial";
context.fillText("G", 130, 940);
context.fillText("1st", 130, 850);
context.fillText("2nd", 130, 760);
context.fillText("3rd", 130, 670);
context.fillText("4th", 130, 580);
context.fillText("5th", 130, 495);
context.fillText("6th", 130, 405);
context.fillText("7th", 130, 315);
context.fillText("8th", 130, 225);
context.fillText("9th", 130, 135);
context.fillText("10th", 125, 50);
context.stroke();
context.drawImage(img, posX, posY + img.height / 2, img.width, img.height);
}
function buttonClick(e) {
if (!imgLoaded) return;
targY = e.currentTarget.snap;
}
var theButton;
for (var a = 0; a < myButtons.length; a++) {
theButton = document.getElementById(myButtons[a].id);
theButton.snap = myButtons[a].snap;
theButton.onclick = buttonClick;
}
var interval = setInterval(updateCanvas, 20);
.shadow1 {
box-shadow: 3px 7px 3px gray;
transition: all .2s ease-in-out;
}
.shadow1:hover {
transform: scale(1.05);
}
#main {
background-color: gray;
}
/* Media query for Mobile devices*/
@media only screen and (min-width: 285px) and (max-width: 480px) {}
/* Media Query for Tablets */
@media only screen and (min-width: 481px) and (max-width: 1024px) {}
/* Desktops and laptops */
@media only screen and (min-width: 1025px) {}
<div class="row">
<div class="col-sm-2 bg-primary">
<h5>Advertisement</h5>
</div>
<div class="col-sm-10 bg-light">
<h5 class="text-center mt-4">Floor Selection</h5>
<div class="row pb-5 no-gutters" style="padding-left: 100px; padding-right: 100px;">
<div class="col-sm-2 mt-2 text-center">
<canvas id="main" width="200px" height="1000px"></canvas>
</div>
<div class="col-sm-8">
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorTen" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Home & Office Furniture</strong></h6></button>
<a href="" id="" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"> <span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Home Appliances & Accessories</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorNine" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Ready Food & Beverages</strong></h6></button>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorEight" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Toys & Gadgets Offices Stationaries & Accessories</strong></h6></button>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorSeven" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Halal Products & Goods</strong></h6></button>
<a href="" id="floorSeven" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Retails Stores</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorSix" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Electronics</strong></h6></button>
<a href="" id="floorSix" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile & Tablets</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile Accessories</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Camera</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> IT Accessories Computers, Printer & Laptop</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorFive" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Sport Clothes Male & Accessories</strong></h6></button>
<a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Swim Suit Male & Female</span></a>
<a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Gym & Other Sports Equipments</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorFour" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Jewelry & Accessories</strong></h6></button>
<a href="" id="floorFour" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Jewelry</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Trinkets Jewelry</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Sun Glasses</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Watches</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorThree" class="text-dark btn btn-default" style="text-decoration: none;"> <h6><strong>Beauty</strong></h6></button>
<a href="" id="floorThree" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Cosmetics</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Skin Care</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Hair Care</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Perfumes (Male & Female)</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorTwo" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Man Fashion</strong></h6></button>
<a href="" id="floorTwo" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
<a href="" id="floorTow" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
<a href="" id="floorTwo" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Leather Items</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorOne" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Women Fashion</strong></h6></button>
<a href="" id="floorOne" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
<a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Lingeries</a>
<a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorG" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Backyard</strong></h6></button>
</div>
</div>
<div class="col-sm-2">People will be moving here</div>
</div>
</div>
</div>
编辑
正如您在评论中所问 - 是的，可以在 'elevator' 移动期间更改颜色。我修改了之前的示例以更改文本颜色。 为了完成这项工作，我们需要检查电梯的当前垂直屏幕位置并将其与每个文本框的位置进行比较。这意味着我们需要对文本及其在另一个数组中的位置进行分组，因为这使得更新循环中的事情变得更容易一些。
var floors=[{name: "G",xPos: 130, yPos: 940},
{name: "1st",xPos: 130, yPos: 850},
{name: "2nd",xPos: 130, yPos: 760 },
{name: "3rd",xPos: 130, yPos: 670},
{name: "4th",xPos: 130, yPos: 580},
{name: "5th",xPos: 130, yPos: 495},
{name: "6th",xPos: 130, yPos: 405},
{name: "7th",xPos: 130, yPos: 315},
{name: "8th",xPos: 130, yPos: 225},
{name: "9th",xPos: 130, yPos: 135},
{name: "10th",xPos: 125, yPos: 50}
];
现在我们可以很容易地遍历这个数组，检查电梯是否在一定范围内到上面的 yPos 位置之一，如果是的话，使用不同的文本颜色。 此外，如果电梯到达目标 targY，我们现在将清除间隔并将文本颜色设置为另一种颜色，因为如果电梯静止不动，实际上没有必要继续重绘 canvas。
完整代码如下：
var context = document.getElementById('main').getContext("2d");
var myButtons = [
{id: "floorG",snap: 10},
{id: "floorOne",snap: 90},
{id: "floorTwo", snap: 185},
{id: "floorThree", snap: 270},
{id: "floorFour", snap: 360},
{id: "floorFive", snap: 450},
{id: "floorSix",snap: 540},
{id: "floorSeven",snap: 620},
{id: "floorEight", snap: 710},
{id: "floorNine", snap: 800},
{id: "floorTen", snap: 890}
];
var floors=[{name: "G",xPos: 130, yPos: 940},
{name: "1st",xPos: 130, yPos: 850},
{name: "2nd",xPos: 130, yPos: 760 },
{name: "3rd",xPos: 130, yPos: 670},
{name: "4th",xPos: 130, yPos: 580},
{name: "5th",xPos: 130, yPos: 495},
{name: "6th",xPos: 130, yPos: 405},
{name: "7th",xPos: 130, yPos: 315},
{name: "8th",xPos: 130, yPos: 225},
{name: "9th",xPos: 130, yPos: 135},
{name: "10th",xPos: 125, yPos: 50}
];
var posX = 48;
var posY = 905;
var targY = posY;
var interval;
var imgLoaded = false;
var img = new Image();
img.onload = function() {
imgLoaded = true;
context.drawImage(img, posX, posY, img.width / 21, img.height / 29);
};
img.src = "http://via.placeholder.com/50x50";
function updateCanvas() {
posY = ((posY - targY) * 0.9 + targY);
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.fillStyle = "black";
context.beginPath();
context.moveTo(80, 0);
context.lineTo(80, 1000);
context.moveTo(50, 0);
context.lineTo(50, 1000);
context.moveTo(110, 0);
context.lineTo(110, 1000);
context.font = "20px Arial";
var floor;
for (var a = 0; a < floors.length; a++) {
floor = floors[a];
if (Math.abs((posY + img.height / 2) - floor.yPos) < 30) {
if (Math.abs(posY - targY) < 1) {
context.fillStyle = "green";
clearInterval(interval);
interval = null;
} else {
context.fillStyle = "blue";
}
} else {
context.fillStyle = "black";
}
context.fillText(floor.name, floor.xPos, floor.yPos);
}
context.stroke();
context.drawImage(img, posX, posY + img.height / 2, img.width, img.height);
}
function buttonClick(e) {
if (!imgLoaded) return;
targY = e.currentTarget.snap;
if(interval==null)
{
interval = setInterval(updateCanvas, 20);
}
}
var theButton;
for (var a = 0; a < myButtons.length; a++) {
theButton = document.getElementById(myButtons[a].id);
theButton.snap = myButtons[a].snap;
theButton.onclick = buttonClick;
}
interval = setInterval(updateCanvas, 20);
.shadow1 {
box-shadow: 3px 7px 3px gray;
transition: all .2s ease-in-out;
}
.shadow1:hover {
transform: scale(1.05);
}
#main {
background-color: gray;
}
/* Media query for Mobile devices*/
@media only screen and (min-width: 285px) and (max-width: 480px) {}
/* Media Query for Tablets */
@media only screen and (min-width: 481px) and (max-width: 1024px) {}
/* Desktops and laptops */
@media only screen and (min-width: 1025px) {}
<div class="row">
<div class="col-sm-2 bg-primary">
<h5>Advertisement</h5>
</div>
<div class="col-sm-10 bg-light">
<h5 class="text-center mt-4">Floor Selection</h5>
<div class="row pb-5 no-gutters" style="padding-left: 100px; padding-right: 100px;">
<div class="col-sm-2 mt-2 text-center">
<canvas id="main" width="200px" height="1000px"></canvas>
</div>
<div class="col-sm-8">
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorTen" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Home & Office Furniture</strong></h6></button>
<a href="" id="" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"> <span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Home Appliances & Accessories</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorNine" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Ready Food & Beverages</strong></h6></button>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorEight" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Toys & Gadgets Offices Stationaries & Accessories</strong></h6></button>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorSeven" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Halal Products & Goods</strong></h6></button>
<a href="" id="floorSeven" class="text-dark" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Retails Stores</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorSix" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Electronics</strong></h6></button>
<a href="" id="floorSix" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile & Tablets</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Mobile Accessories</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Camera</a>
<a href="" id="floorSix" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> IT Accessories Computers, Printer & Laptop</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorFive" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Sport Clothes Male & Accessories</strong></h6></button>
<a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Swim Suit Male & Female</span></a>
<a href="" id="floorFive" class="" style="text-decoration: none; color: rgb(75, 73, 71);"><span style="margin-left: 10px;">|</span> <span style="margin-left: 20px;">Gym & Other Sports Equipments</span></a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorFour" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Jewelry & Accessories</strong></h6></button>
<a href="" id="floorFour" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Jewelry</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Trinkets Jewelry</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Sun Glasses</a>
<a href="" id="floorFour" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Watches</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorThree" class="text-dark btn btn-default" style="text-decoration: none;"> <h6><strong>Beauty</strong></h6></button>
<a href="" id="floorThree" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Cosmetics</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Skin Care</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Hair Care</a>
<a href="" id="floorThree" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Perfumes (Male & Female)</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorTwo" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Man Fashion</strong></h6></button>
<a href="" id="floorTwo" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
<a href="" id="floorTow" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
<a href="" id="floorTwo" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Leather Items</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorOne" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Women Fashion</strong></h6></button>
<a href="" id="floorOne" class="" style="margin-left: 50px; text-decoration: none; color: rgb(75, 73, 71);"> Clothes</a>
<a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Lingeries</a>
<a href="" id="floorOne" class="" style="margin-left: 20px; text-decoration: none; color: rgb(75, 73, 71);"> Shoes & Bags</a>
</div>
<div class="col-sm-12 mt-3 p-3 shadow1" style="background-color: rgb(213, 216, 218);">
<button id="floorG" class="text-dark btn btn-default" style="text-decoration: none;"><h6><strong>Backyard</strong></h6></button>
</div>
</div>
<div class="col-sm-2">People will be moving here</div>
</div>
</div>
</div>