javascript - 如何在几秒钟内通过 onClick 事件在不同位置重绘画布？
问题描述
我想在从底部到用户选择按钮/链接的几秒钟内在不同位置多次重绘画布。
从示例图像中，如果用户单击 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 个按钮，一旦单击它们基本上都会做同样的事情：
- 更新单个变量
- 重绘画布
目前，您手动将上述所有操作附加到每个按钮。
例如
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;
}
电梯的实际移动实际上并没有那么难。我们只需要一个基于电梯目标位置不断更新画布的函数。此外，如果电梯不只是以线性方式从 a 移动到 b，那就太好了——它应该在接近目的地时减速。这种效果称为缓动。让我们创建另一个函数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就越快。
现在缺少的一切都是一些定期调用此函数的机制。这是通过使用该setInterval()方法来完成的。它以固定的时间间隔调用给定的函数。
这是完整的示例（只需单击“运行代码片段”）：
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>编辑
正如您在评论中所问的那样 - 是的，可以在“电梯”移动期间更改颜色。我修改了我之前的示例以更改文本颜色。为了完成这项工作，我们需要检查电梯当前的垂直屏幕位置，并将其与每个文本框的位置进行比较。这意味着我们需要将文本和它的位置分组到另一个数组中，因为这使得更新循环中的事情变得更容易一些。
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，我们现在正在清除间隔并将 textcolor 设置为另一种颜色，因为如果电梯静止，实际上没有必要继续重新绘制画布。
这是完整的代码：
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>推荐阅读
- oop - Calling methods defined in different parts of the directory to wherever you want
- python-3.x - 如何使用 Python 循环通过 api 从特定页面组中提取记录
- vscode-debugger - 无法在 Visual Studio Code 中开始调试（错误 216）
- validation - 从外部、远程 JSON 模式中引用子键
- html - 在 Django/Wagtail 中创建博客文章的喜欢/不喜欢按钮
- reactjs - 如何替换 UNSAFE_componentWillReceiveProps
- xml - 使用 sed/awk/grep 匹配段落并替换为新段落
- c - 如何编写将 0xFF 置于匹配通道中的 SWAR 比较？
- javascript - 使用 Webpack Encore 导入 Bootstrap 和插件 Carousel
- delphi - 如何将 Viewport3D 保存为图像文件？