HTML5和JavaScript動畫矩形？
[英]HTML5 and JavaScript Animating Rectangles?
問題描述
我正在嘗試實現這種“鏈接列表動畫”，在該動畫中，用戶將能夠選擇矩形的顏色，並且看起來就像它們在圖的鏈接列表類型中一樣。
我在制定某種類型的循環時遇到麻煩，這些循環一旦將矩形放置在頁面上就會改變它們的位置？ 我的代碼目前正在計算他們單擊“插入按鈕”的次數，然后根據該次數將在頁面上繪制矩形。 我絕對知道這不是最有效的方法，我想對如何使它變得更好有所幫助。 一個for循環，一個數組？ 我的代碼如下所示，它現在很大程度上取決於if＆else語句，如果我以后要刪除節點，那不是最好的方法……請幫助。
基本上：我想在用戶單擊“插入”按鈕后在另一個的末端添加矩形。 如何不依賴if-else語句來執行此操作？ 我該如何在這里循環？
<!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
就我個人而言，除非沒有其他辦法，否則我將盡量不重復任何代碼。
在這種情況下，我還將使用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>
HTML5，JavaScript和在畫布中繪制多個矩形
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.