我正在尝试制作一个小表格，在其中可以放置不同的值，并绘制两个矩形，并从下拉菜单中选择的矩形居中，该矩形以自由文本字段中的值绘制的矩形为中心。
将绘制来自自由文本字段的第一个矩形，但前提是要删除从下拉框中绘制第二个矩形的代码。我认为使用switch语句绘制第二个矩形最容易，但是不确定是否应将其放置在同一函数中。我是JS的新手，所以我不知道该怎么做。
function updateForm(width, height, box) {
"use strict";
var x = 50;
var y = 50;
var canvas = document.createElement("canvas"); //Create a canvas
//Set canvas width/height
canvas.style.width = "100%";
canvas.style.height = "100%";
// Set canvas drawing area width/height
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//Position canvas
canvas.style.position = "absolute";
canvas.style.left = 0;
canvas.style.top = 350;
canvas.style.zIndex = 100000;
canvas.style.pointerEvents = "none";
document.body.appendChild(canvas); //Append canvas to body element
var context = canvas.getContext("2d");
//Draw rectangle
context.rect(x, y, height*50, width*50);
context.fillStyle = "blue";
context.fill();
switch (box) {
case 'three-two':
context.rect(x, y, 150,200);
context.fillStyle = "green";
context.fill();
break;
case 'four-six':
context.rect(x, y, 200,300);
context.fillStyle = "red";
context.fill();
break;
case 'five-four':
context.rect(x, y, 250,200);
context.fillStyle = "orange";
context.fill();
break;
default:
alert("The value supplied is out of range!");
break;
}
}
function draw() {
var width = document.getElementById("wid").value;
var height = document.getElementById("hgt").value;
var box = document.getElementById("boxSize").value;
updateForm(width, height, box);
}<div class="container">
<form id="areaform">
<label for="wid">Width:</label>
<input id="wid" type="number">
<label for="hgt">Length:</label>
<input id="hgt" type="number">
<label for="boxSize">Box Size</label>
<select id="boxSize" name="boxSize">
<option value="three-two">3x2</option>
<option value="four-six">4x6</option>
<option value="five-four">5x4</option>
</select>
<button onclick="draw()" type="button">Draw Rectangle</button>
</form>
</div>
使用上面的所有代码，两个矩形都不会呈现。我希望两个矩形根据第一个基于width / height字段中的数值进行渲染，第二个根据我的尺寸与下拉框中选择的值相匹配，在第一个矩形的上方并居中渲染。
答案 0 :(得分：0)
一些问题：
element放在单独的行中。这会导致错误draw是本地函数，因此无法从HTML引用。它应该是一个全局函数。context.beginPath()开始每个新矩形，以免发生这种情况。然后，当您要使第二个矩形居中时，应根据两个矩形的大小计算适当的x和y坐标。
这是经过更正的代码：
function updateForm(width, height, box) {
"use strict";
var x = 50;
var y = 50;
var canvas = document.createElement("canvas"); //Create a canvas element
//Set canvas width/height
canvas.style.width = "100%";
canvas.style.height = "100%";
// Set canvas drawing area width/height
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//Position canvas
canvas.style.position = "absolute";
canvas.style.left = 0;
canvas.style.top = 350;
canvas.style.zIndex = 100000;
canvas.style.pointerEvents = "none";
document.body.appendChild(canvas); //Append canvas to body element
var context = canvas.getContext("2d");
//Draw rectangle
context.beginPath();
context.fillStyle = "blue";
console.log('----------------');
console.log(x, y, width*50, height*50);
context.rect(x, y, width*50, height*50);
context.fill();
context.beginPath();
switch (box) {
case 'three-two':
console.log(x+(width-3)*25, y+(height-4)*25, 150, 200);
context.rect(x+(width-3)*25, y+(height-4)*25, 150, 200);
context.fillStyle = "green";
break;
case 'four-six':
context.rect(x+(width-4)*25, y+(height-6)*25, 200, 300);
context.fillStyle = "red";
break;
case 'five-four':
context.rect(x+(width-5)*25, y+(height-4)*25, 250, 200);
context.fillStyle = "orange";
break;
}
context.fill();
}
function draw() {
var width = document.getElementById("wid").value;
var height = document.getElementById("hgt").value;
var box = document.getElementById("boxSize").value;
updateForm(width, height, box);
}<div class="container">
<form id="areaform">
<label for="wid">Width:</label>
<input id="wid" type="number">
<label for="hgt">Length:</label>
<input id="hgt" type="number">
<label for="boxSize">Box Size</label>
<select id="boxSize" name="boxSize">
<option value="three-two">3x2</option>
<option value="four-six">4x6</option>
<option value="five-four">5x4</option>
</select>
<button onclick="draw()" type="button">Draw Rectangle</button>
</form>
</div>
我没有触及每次用户单击按钮时用于生成新画布的机制，每个画布都覆盖前一个画布。请注意，画布背景是透明的，因此您可能仍然可以看到先前生成的一对矩形的一部分出现在较新的矩形旁边。
如果您不希望发生这种情况，则只需在静态HTML中创建一个canvas元素，而无需动态生成它。
答案 1 :(得分：0)
这是因为每个矩形的画布的z索引均相同。 尝试将其移动到您的switch / case构造中，并将其值设置为3000、2000、1000。
function updateForm(width, height, box) {
"use strict";
var x = 50;
var y = 50;
var canvas = document.createElement("canvas"); //Create a canvas
//Set canvas width/height
canvas.style.width = "100%";
canvas.style.height = "100%";
// Set canvas drawing area width/height
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//Position canvas
canvas.style.position = "absolute";
canvas.style.left = 0;
canvas.style.top = 350;
canvas.style.pointerEvents = "none";
document.body.appendChild(canvas); //Append canvas to body element
var context = canvas.getContext("2d");
//Draw rectangle
context.rect(x, y, height*50, width*50);
context.fillStyle = "blue";
context.fill();
switch (box) {
case 'three-two':
canvas.style.zIndex = 3000;
context.rect(x, y, 150,200);
context.fillStyle = "green";
context.fill();
break;
case 'four-six':
canvas.style.zIndex = 2000;
context.rect(x, y, 200,300);
context.fillStyle = "red";
context.fill();
break;
case 'five-four':
canvas.style.zIndex = 1000;
context.rect(x, y, 250,200);
context.fillStyle = "orange";
context.fill();
break;
default:
alert("The value supplied is out of range!");
break;
}
}
function draw() {
var width = document.getElementById("wid").value;
var height = document.getElementById("hgt").value;
var box = document.getElementById("boxSize").value;
updateForm(width, height, box);
}<div class="container">
<form id="areaform">
<label for="wid">Width:</label>
<input id="wid" type="number">
<label for="hgt">Length:</label>
<input id="hgt" type="number">
<label for="boxSize">Box Size</label>
<select id="boxSize" name="boxSize">
<option value="three-two">3x2</option>
<option value="four-six">4x6</option>
<option value="five-four">5x4</option>
</select>
<button onclick="draw()" type="button">Draw Rectangle</button>
</form>
</div>