HTML5和JavaScript动画矩形？
[英]HTML5 and JavaScript Animating Rectangles?
问题描述
I am trying to implement this "linked list animation" where users will be able to choose colors of rectangles and it will appear as if they are in a linked-list-type of diagram. 
我正在尝试实现这种“链接列表动画”，在该动画中，用户将能够选择矩形的颜色，并且看起来就像它们在图的链接列表类型中一样。
I am having trouble formulating some type of loop that would change the position of the rectangles once they are placed on the page? 我在制定某种类型的循环时遇到麻烦，这些循环一旦将矩形放置在页面上就会改变它们的位置？ My code currently, is counting the amount of times that they click the "Insert button" and then according to the count would draw the rectangle on the page. 我的代码目前正在计算他们单击“插入按钮”的次数，然后根据该次数将在页面上绘制矩形。 I definitely know that this is not the most efficient way of doing it, and I would like some help on how I can make this better? 我绝对知道这不是最有效的方法，我想对如何使它变得更好有所帮助。 A for-loop, an array? 一个for循环，一个数组？ My code is shown below, it is heavily dependent on if & else statements right now, which isn't the best if I want to delete nodes in the future... please help. 我的代码如下所示，它现在很大程度上取决于if＆else语句，如果我以后要删除节点，那不是最好的方法……请帮助。
BASICALLY: I would like to add rectangles to the ends of another after the user clicks the button "Insert". 基本上：我想在用户单击“插入”按钮后在另一个的末端添加矩形。 How can I do this without depending on if-else statements? 如何不依赖if-else语句来执行此操作？ How can I put a loop into here? 我该如何在这里循环？
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<style type='text/css'>
body {
font-family: 'Josefin Sans', sans-serif;
line-height: 1.4em;
}
#left_column{
float: left;
width:50%;
}
#right_column{
float:right;
width:50%;
}
#Container{
width: 100%;
height: 400px;
position: relative;
background: yellow;
}
</style>
<title>Rainbow</title>
</head>
<body>
<div style="text-align: center">
<h1 class="Title">rainbow</h1>
</div>
<div id = "left_column">
<div id = Container>
<canvas id = "panel"></canvas>
</div>
</div>
<div id = "right_column">
<select id = "colorNodes" style="margin-left: 10px">
<option value = "red">red</option>
<option value = "blue">blue</option>
<option value = "green">green</option>
<option value = "orange">orange</option>
</select>
<button onclick ="insertNode()" style="margin-left: 10px">Insert</button>
<button onclick = "searchNode()" style="margin-left: 10px">Search</button>
<button onclick = "deleteNode()" style="margin-left: 10px">Delete</button>
</div>
<script>
var count = 0;
function insertNode(){
var e = document.getElementById("colorNodes");
var f = e.options[e.selectedIndex].text;
console.log("var f is " + f);
if(count == 0){
if(f == "red"){
count++;
var canvas = document.getElementById("panel");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#ff3535";
ctx.fillRect(20, 20, 150, 100);
}
} else if(f == "blue"){
count++;
var canvas = document.getElementById("panel");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#60b2ff";
ctx.fillRect(20, 20, 150, 100);
}
} else if(f == "green"){
count++;
var canvas = document.getElementById("panel");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#6ce2a5";
ctx.fillRect(20, 20, 150, 100);
}
} else if(f == "orange"){
count++;
var canvas = document.getElementById("panel");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#ffb135";
ctx.fillRect(20, 20, 150, 100);
}
}
} else if (count == 1){
if(f == "red"){
count++;
var canvas = document.getElementById("panel");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#ff3535";
ctx.fillRect(190, 20, 190, 100);
}
} else if(f == "blue"){
count++;
var canvas = document.getElementById("panel");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#60b2ff";
ctx.fillRect(190, 20, 190, 100);
}
} else if(f == "green"){
count++;
var canvas = document.getElementById("panel");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#6ce2a5";
ctx.fillRect(190, 20, 190, 100);
}
} else if(f == "orange"){
count++;
var canvas = document.getElementById("panel");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#ffb135";
ctx.fillRect(190, 20, 190, 100);
}
}
}
}
</script>
</body>
</html>
1 个解决方案
解决方案1
0 已采纳 2018-03-10 05:27:31
Personally, I would try to not repeat any code unless I could not think of another way. 就我个人而言，除非没有其他办法，否则我将尽量不重复任何代码。
I would also use a switch statement in this case. 在这种情况下，我还将使用switch语句 。
var count = 0; function insertNode(){ var e = document.getElementById("colorNodes"); var f = e.options[e.selectedIndex].text; console.log("var f is " + f); var canvas = document.getElementById("panel"); if (! canvas.getContext) { console.log("no canvas context"); return; } if (count > 1) { console.log("count > 1"); return } var ctx = canvas.getContext("2d"); var fRect = { 0:[20, 20, 150, 100], 1:[190, 20, 190, 100], }; var fColor = null; switch(f) { case 'red' : fColor = "#ff3535"; break; case 'blue' : fColor = "#60b2ff"; break; case 'green' : fColor = "#6ce2a5"; break; case 'orange' : fColor = "#ffb135"; break; default : console.log("invalid color selection"); return; } ctx.fillStyle = fColor; ctx.fillRect(fRect[count][0],fRect[count][1],fRect[count][2],fRect[count][3]); count++; return; }
body { font-family: 'Josefin Sans', sans-serif; line-height: 1.4em; } #left_column{ float: left; width:50%; } #right_column{ float:right; width:50%; } #Container{ width: 100%; height: 400px; position: relative; background: yellow; }
<div style="text-align: center"> <h1 class="Title">rainbow</h1> </div> <div id = "left_column"> <div id = Container> <canvas id = "panel"></canvas> </div> </div> <div id = "right_column"> <select id = "colorNodes" style="margin-left: 10px"> <option value = "red">red</option> <option value = "blue">blue</option> <option value = "green">green</option> <option value = "orange">orange</option> </select> <button onclick ="insertNode()" style="margin-left: 10px">Insert</button> <button onclick = "searchNode()" style="margin-left: 10px">Search</button> <button onclick = "deleteNode()" style="margin-left: 10px">Delete</button> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.